JavaScript: Introduction, Syntax, Tokens, Data Types, Control Structures,

Operators, Functions, and Variables

1. Introduction to JavaScript

 What is JavaScript?
o JavaScript is a high-level, dynamic, and interpreted programming language.
o It is primarily used to create interactive and dynamic content on websites, such as
form validation, animations, and real-time updates.
o JavaScript was originally developed by Netscape and is now standardized by
ECMA (ECMAScript).
 Key Characteristics:
o Interpreted Language: JavaScript code is executed line by line by the browser
without requiring a compiler.
o Weakly Typed: Variables do not need to be explicitly typed (e.g., let x = 5;
works for both numbers and strings).
o Event-driven: JavaScript is often used for handling events like clicks, mouse
movements, and keyboard inputs.
o Versatile: JavaScript is used both on the client-side (in the browser) and server-
side (using Node.js).
o Asynchronous: JavaScript can perform asynchronous operations, allowing web
pages to load quickly without blocking the user interface (UI).
 Uses of JavaScript:
o Client-side scripting for web pages (HTML + CSS interaction).
o Server-side programming (Node.js).
o Building web APIs (AJAX, Fetch API).
o Manipulating the DOM (Document Object Model) to update HTML and CSS.

2. JavaScript Syntax

JavaScript syntax defines the rules that govern the structure of JavaScript programs.

 Basic Structure:
o JavaScript code can be written directly in the <script> tag in HTML or in
external .js files.
o JavaScript statements are generally terminated with a semicolon (;), though it’s
optional due to automatic semicolon insertion (ASI).
o Comments:
 Single-line comment: // This is a comment
 Multi-line comment: /* This is a multi-line comment */
 Code Block:
o Code blocks are enclosed in curly braces {}.
 javascript
Copy code
if (x > 10) {
console.log("x is greater than 10");
}

 Case Sensitivity:
o JavaScript is case-sensitive, meaning variable and Variable are considered
different identifiers.
 Statements:
o JavaScript statements control the flow of a program. Common statements include
variable declarations, expressions, conditionals, and loops.

3. JavaScript Tokens

Tokens are the smallest building blocks in JavaScript. They are classified into the following
categories:

 Keywords: Reserved words with special meanings in JavaScript (e.g., let, const, if,
function).
 Identifiers: Names given to variables, functions, or objects (e.g., x, sum,
calculateTotal).
 Literals: Fixed values that appear in code (e.g., 42, 'hello', true, [1, 2, 3]).
 Operators: Symbols that perform operations on variables and values (e.g., +, =, &&).
 Separators: Characters that separate parts of code (e.g., ;, {, }, ,).
 Comments: Text used to describe code logic (e.g., // for single-line and /*...*/ for
multi-line comments).

4. JavaScript Data Types

Data types define the kind of value a variable can hold. JavaScript has two categories of data
types:

 Primitive Data Types (Value Types):

o Number: Represents both integer and floating-point numbers (e.g., 5, 3.14).
o String: Represents a sequence of characters (e.g., 'Hello', "World").
o Boolean: Represents true or false (e.g., true, false).
o Undefined: Represents a variable that has been declared but has no assigned
value.
o Null: Represents the intentional absence of any object value.
o Symbol: A unique and immutable value (used for object property keys).
o BigInt: Represents large integers (larger than Number.MAX_SAFE_INTEGER).
 Non-Primitive Data Types (Reference Types):
 o Object: A collection of key-value pairs (e.g., {name: "Alice", age: 25}).
o Array: A special type of object for storing ordered lists (e.g., [1, 2, 3]).
o Function: A block of reusable code that can be executed.

javascript
Copy code
let number = 10; // Number
let name = "John"; // String
let isActive = true; // Boolean
let person = { name: "Alice", age: 30 }; // Object
let numbers = [1, 2, 3]; // Array

5. JavaScript Variables

Variables store data values and are used to reference data in your programs.

 Declaring Variables:
o let: Defines a variable that can be reassigned.
o const: Defines a constant that cannot be reassigned.
o var: An older way of defining variables, now less preferred due to scoping issues.

javascript
Copy code
let x = 5; // Variable that can be reassigned
const y = 10; // Constant value that cannot be changed
var z = 20; // Older method, function-scoped

 Variable Naming Rules:

o Variable names must start with a letter, underscore (_), or dollar sign ($ and can
be followed by letters, digits, underscores, or dollar signs.
o Reserved keywords (e.g., let, const, if) cannot be used as variable names.

6. JavaScript Control Structures

Control structures allow the program to make decisions and repeat actions.

 Conditional Statements:
o if: Executes a block of code if a condition is true.
o else: Executes a block of code if the condition is false.
o else if: Specifies a new condition to test if the previous if is false.
o switch: Used to execute one of many blocks of code based on a value.

javascript
Copy code
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}

let day = "Monday";

switch (day) {
case "Monday":
console.log("Start of the week");
break;
case "Friday":
console.log("End of the week");
break;
default:
console.log("Middle of the week");
}

 Loops:
o for: Loops through a block of code a specified number of times.
o while: Loops through a block of code while a condition is true.
o do...while: Loops through a block of code once, and then repeats the loop as
long as the condition is true.

javascript
Copy code
// for loop
for (let i = 0; i < 5; i++) {
console.log(i);
}

// while loop
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

// do...while loop
let j = 0;
do {
console.log(j);
j++;
} while (j < 5);

7. JavaScript Operators

Operators are used to perform operations on values and variables.

 Arithmetic Operators:
o +, -, *, /, % (modulus), ++, --

javascript
Copy code
 let x = 5;
let y = 2;
console.log(x + y); // 7 (Addition)
console.log(x * y); // 10 (Multiplication)
console.log(x / y); // 2.5 (Division)

 Assignment Operators:
o =, +=, -=, *=, /=, %=

javascript
Copy code
let a = 10;
a += 5; // a = a + 5
console.log(a); // 15

 Comparison Operators:
o ==, ===, !=, !==, >, <, >=, <=

javascript
Copy code
let a = 10;
let b = 20;
console.log(a > b); // false
console.log(a == 10); // true

 Logical Operators:
o && (AND), || (OR), ! (NOT)

javascript
Copy code
let x = true;
let y = false;
console.log(x && y); // false

 Ternary Operator:
o A shorthand for if-else statements.

javascript
Copy code
let age = 18;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

8. JavaScript Functions

Functions are reusable blocks of code that perform a specific task.

 Function Declaration: Functions are declared using the function keyword.

javascript
 Copy code
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice"); // Output: Hello, Alice

 Function Expression: Functions can also be defined as expressions and assigned to

variables.

javascript
Copy code
const add = function(a, b) {
return a + b;
};
console.log(add(3, 4)); // Output: 7

 Arrow Functions (ES6): A more concise syntax for writing functions.

javascript
Copy code
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // Output: 6

 Return Statement: Functions can return values using the return keyword.

javascript
Copy code
function square(x) {
return x * x;
}
console.log(square(4)); // Output: 16