JavaScript

JavaScript (JS) is a high-level, interpreted programming language primarily used to make web pages interactive. It is one of the core technologies of the web, along with HTML and CSS.

High level : JavaScript is closer to human language
Interpreted : the code is run line-by-line by an interpreter ( the browser's JavaScript engine like V8 in Chrome).

Use Cases of JavaScript

---

Variables

variables are like a container which are used to store something that will be needed repeatedly.

In JS, we have 3 types of variables :
1. Var
2. Let
3. Const

1. var

• Introduced in ES5 (old way).

• Function-scoped.

• Can be redeclared and reassigned.

• Hoisted (moved to the top during execution, but not initialized).

Syntax:

var name = "Koustav";
console.log(name);  // koustav
//-----------------------
var num = 10;
console.log(num);  // 10

var num=20;
console.log(num);   // 20
//-----------------------
{
var n = 50;
}
console.log(n);   // 50 
// ----------------------
function greet() {
  var msg = "Hello";
  if (true) {
    var msg = "Hi"; // Same variable (due to function scope)
    console.log(msg); // Hi
  }
  console.log(msg); // Hi
}
greet();

2. let

• Introduced in ES6.

• Block-scoped.

• Can be reassigned but not redeclared in the same scope.

• Hoisted but not initialized (you get a ReferenceError if used before declaration).

Syntax:

let age = 25;
//-------------------------
let num = 10;
console.log(num);  // 10

let num = 20;
console.log(num);   // error - num is already defined - cannot re-declared

num = 20;
console.log(num);   // this will work as it can be re-assigned 
//-------------------------

function test() {
  let x = 10;
  if (true) {
    let x = 20; // different variable (block scope)
    console.log(x); // 20
  }
  console.log(x); // 10
}
test();

3. const

• Also introduced in ES6.

• Block-scoped like let.

• Cannot be reassigned.

• Must be initialized at the time of declaration.

Syntax:

const pi = 3.14;
// --------------------

const user = { name: "Koustav" };
user.name = "Moitra"; // Allowed (object property changed)
console.log(user.name); // Moitra

user = { name: "New" }; // ❌ Error: Assignment to constant variable
// --------------------

// Use for constants or when reassignment is not needed.
// For objects/arrays, internal values can be changed

Summary Table:

---

Hoisting

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope (before code execution).

Hoisting with var

console.log(name); // undefined
var name = "Koustav";

Explanation:

During the memory phase, var name is hoisted to the top and initialized as undefined. So by the time console.log() runs, name exists but has no value yet.

Internally, JS sees it like:

var name;
console.log(name); // undefined
name = "Koustav";

let and const are hoisted but not initialized

console.log(age); // ❌ ReferenceError
let age = 25;

Why?

• let and const are hoisted but kept in a Temporal Dead Zone (TDZ) from the start of the block until they are initialized.

• You can’t access them before declaration.

Function Declaration Hoisting

greet(); // ✅ Works

function greet() {
  console.log("Hello, Koustav!");
}

Why?

• Function declarations are fully hoisted, including their body.

JS treats it like:

function greet() {
  console.log("Hello, Koustav!");
}
greet();

Function Expression is not hoisted

sayHi(); // ❌ TypeError: sayHi is not a function

var sayHi = function () {
  console.log("Hi!");
};

Why?

• sayHi is hoisted as a variable (undefined), but the function body is not hoisted.

• You’re trying to call undefined().

---

Temporal Dead Zone (TDZ)

The Temporal Dead Zone (TDZ) is the time between:

• When a variable is hoisted (declared in memory), and

• When it is actually initialized in your code.

If you try to access the variable before it’s initialized, you’ll get a ReferenceError — even though it's hoisted.

TDZ applies to:

• let

• const

❌ Not to var (it gets undefined instead)

Example:

console.log(name); // ❌ ReferenceError
let name = "Koustav";

Why this error?

• let name is hoisted to the top.

• But it’s not initialized until the let line is executed.

• So console.log(name) is trying to access it while it's still in the TDZ.

Behind the scenes:

JavaScript sees your code like:

// TDZ starts here
let name; // declared (hoisted), but NOT initialized

console.log(name); // in TDZ → ReferenceError
name = "Koustav"; // TDZ ends here

Best Practices to Avoid TDZ Issues:

• ✅ Always declare variables at the top of their block.

• ✅ Never use variables before declaring them.

• ❌ Avoid mixing var, let, and const in the same scope.

---

Template Literals

Template Literals are a new way to define strings introduced in ES6 (ECMAScript 2015).

Instead of using:

• Single quotes (')

• Double quotes (")

You use backticks (` ).

1. Basic Example:

let name = "Koustav";
let msg = `Hello, ${name}!`;
console.log(msg); // Hello, Koustav!

2. Expression Interpolation:

let a = 10;
let b = 20;
console.log(`The sum of ${a} and ${b} is ${a + b}.`);
// Output: The sum of 10 and 20 is 30.

✅ You can even run JavaScript expressions inside ${}.

3. Multi-line Strings:

let poem = `Roses are red,
Violets are blue,
Template literals,
Make strings new.`;

console.log(poem);
/*
Roses are red,
Violets are blue,
Template literals,
Make strings new.
*/

✅ No need to use \n or + for line breaks!

Before Template Literals (Old Way):

let name = "Koustav";
let msg = "Hello, " + name + "!";

Now with Template Literals:

let msg = `Hello, ${name}!`;

---

Data Type

JavaScript is a dynamically typed language, meaning:

You don’t need to declare a variable’s type — it’s determined at runtime.

1. String

Represents text.

let name = "Koustav";
let greeting = 'Hello';
let sentence = `Welcome, ${name}`; // template literal

Strings can use:

• Double quotes " "

• Single quotes ' '

• Backticks (for template literals)

2. Number

Represents any number, whether integer or floating-point.

let age = 25;
let price = 99.99;
let hex = 0xff;  // hexadecimal

JavaScript has only one number type, unlike other languages.

3. BigInt

Used for very large integers beyond the Number limit.

let bigNum = 1234567890123456789012345678901234567890n;

Note the n at the end.

4. Boolean

Represents true or false.

let isLoggedIn = true;
let hasPermission = false;

Commonly used in conditions and comparisons.

5. Undefined

A variable that has been declared but not yet assigned a value.

let x;
console.log(x); // undefined

6. Null

Represents intentional absence of value.

let data = null;

Often used to reset a variable or indicate "nothing".

7. Symbol

Used for creating unique identifiers (mainly in advanced coding or libraries).

let id = Symbol("userID");

Symbols are always unique, even with the same description.

8. Object

Used to store collections of data or complex entities.

let user = {
  name: "Koustav",
  age: 25,
  isAdmin: true
};

Arrays, functions, and even dates are objects in JavaScript.

Special Object Types

typeof Operator

Use typeof to check the data type:

typeof "Hello"       // "string"
typeof 42            // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null          // ❗️"object" (this is a JavaScript quirk)
typeof Symbol()      // "symbol"
typeof {}            // "object"
typeof []            // "object"
typeof function(){}  // "function"

---

Operators

Operators are special symbols or keywords used to perform operations on operands (values and variables).

let sum = 10 + 5;  // '+' is the operator; 10 and 5 are operands

---

Type Coercion

Type Coercion in JavaScript is the automatic or implicit conversion of values from one data type to another.

It happens when you perform operations on mismatched data types — like adding a string and a number.

1. Implicit Coercion

JavaScript automatically converts one data type to another.

console.log("5" + 1); // "51" → number 1 is coerced to string
console.log("5" - 1); // 4   → string "5" is coerced to number

2. Explicit Coercion

You manually convert a value using functions like Number(), String(), or Boolean().

let a = "42";
let b = Number(a); // Explicit coercion from string to number
console.log(b);    // 42

1. Number + String

console.log(10 + "5");      // "105" (Number → String → Concatenation)
console.log("5" + 10);      // "510"
console.log("10" + true);   // "10true"
console.log("10" + null);   // "10null"
console.log("10" + undefined); // "10undefined"

➡️ The + operator prefers string if one of the operands is a string.

2. Number - String / Boolean / Null / Undefined

console.log("10" - 5);      // 5   → String to Number
console.log(true - 1);      // 0   → true → 1
console.log(false - 1);     // -1  → false → 0
console.log(null - 1);      // -1  → null → 0
console.log(undefined - 1); // NaN → undefined → NaN

➡️ -, *, / → always try to convert values to Number.

3. String - String / Boolean / Null / Object

console.log("10" - "5");     // 5
console.log("hello" - "hi"); // NaN (non-numeric strings)
console.log("5" - true);     // 4
console.log("5" - null);     // 5

➡️ String gets coerced to number only if it’s numeric.

4. Boolean + Number / String

console.log(true + 2);       // 3
console.log(false + 3);      // 3
console.log(true + "2");     // "true2"
console.log(false + "3");    // "false3"

➡️ Boolean → true becomes 1, false becomes 0.

5. null and undefined

console.log(null + 5);        // 5       → null → 0
console.log(undefined + 5);   // NaN     → undefined → NaN
console.log(null == undefined); // true (only in loose equality)
console.log(null === undefined); // false (different types)

6. Array or Object + Number/String

console.log([] + 1);          // "1"       → [] → ""
console.log([1] + 1);         // "11"      → [1] → "1"
console.log({} + 1);          // "[object Object]1"
console.log([] - 1);          // -1        → [] → 0

➡️ Arrays and objects are coerced to strings like "" or "[object Object]".

7. Special NaN Cases

console.log(NaN + 1);         // NaN
console.log(NaN - 1);         // NaN
console.log(NaN * 2);         // NaN
console.log(NaN === NaN);     // false → NaN is not equal to anything, even itself

8. Arithmetic with Booleans

console.log(true * 3);        // 3
console.log(false / 2);       // 0
console.log(true * false);    // 0

9. Truthy & Falsy in Arithmetic

Falsy values: false, 0, "", null, undefined, NaN

console.log("" + 1);         // "1"
console.log(0 + "0");        // "00"
console.log(false + true);   // 1
console.log(null + true);    // 1

10. Unary + operator (Explicit conversion to Number)

console.log(+"5");           // 5
console.log(+true);          // 1
console.log(+false);         // 0
console.log(+null);          // 0
console.log(+undefined);     // NaN

---

Conditional Statements

Conditional statements allow your code to make decisions and execute different blocks of code based on conditions (true/false).

1. if Statement

Syntax:

if (condition) {
  // code to execute if condition is true
}

Example:

let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote.");
}

2. if...else Statement

Syntax:

if (condition) {
  // if true
} else {
  // if false
}

Example:

let marks = 40;

if (marks >= 50) {
  console.log("You passed.");
} else {
  console.log("You failed.");
}

3. if...else if...else Statement

Syntax:

if (condition1) {
  // block 1
} else if (condition2) {
  // block 2
} else {
  // default block
}

Example:

let score = 85;

if (score >= 90) {
  console.log("Grade A");
} else if (score >= 80) {
  console.log("Grade B");
} else {
  console.log("Grade C");
}

4. switch Statement

Used when you have multiple conditions based on one variable.

Syntax:

switch (expression) {
  case value1:
    // block
    break;
  case value2:
    // block
    break;
  default:
    // default block
}

Example:

let day = "Tuesday";

switch (day) {
  case "Monday":
    console.log("Start of the week");
    break;
  case "Tuesday":
    console.log("Second day of the week");
    break;
  default:
    console.log("Some other day");
}

5. Ternary Operator (? :)

A short-hand for if...else.

Syntax:

condition ? expression_if_true : expression_if_false;

Example:

let age = 20;

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result); // "Adult"

Nested Conditionals

Example:

let num = 5;

if (num > 0) {
  if (num % 2 === 0) {
    console.log("Positive even number");
  } else {
    console.log("Positive odd number");
  }
}

Summary Table

---

Loop

Loops are used to execute a block of code repeatedly as long as a certain condition is true.

1. for Loop

Syntax:

for (initialization; condition; update) {
  // code block to execute
}

Example:

for (let i = 1; i <= 5; i++) {
  console.log("Number: " + i);
}
/*
Number: 1
Number: 2
Number: 3
Number: 4
Number: 5
+/

2. while Loop

Syntax:

while (condition) {
  // code block
}

Example:

let i = 1;
while (i <= 3) {
  console.log("Hello");
  i++;
}

/* 
Hello
Hello
Hello
+/

3. do...while Loop

Executes the block at least once, then checks the condition.

Syntax:

do {
  // code block
} while (condition);

Example:

let i = 1;
do {
  console.log("Value is: " + i);
  i++;
} while (i <= 2);

/*
Value is: 1
Value is: 2
+/

4. for...in Loop

Used to iterate over object properties.

Example:

const person = { name: "Alice", age: 25 };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

/* 
name: Alice
age: 25
*/

5. for...of Loop

Used to iterate over iterable values (like arrays, strings).

Example:

let fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
  console.log(fruit);
}

/* 
apple
banana
cherry
*/

6. break and continue

• break → Exits the loop.

• continue → Skips the current iteration and moves to the next.

Example (break):

for (let i = 1; i <= 5; i++) {
  if (i === 3) break;
  console.log(i);
}

/* 
1
2
*/

Example (continue):

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

/*
1
2
4
5
*/

Loop Comparison Table

---

Array

An array is a special variable in JavaScript that can hold multiple values in a single variable.

let fruits = ["apple", "banana", "cherry"];

How to Declare an Array

// Using square brackets
let colors = ["red", "blue", "green"];

// Using the Array constructor
let numbers = new Array(1, 2, 3, 4);

Accessing Array Elements

Array indexing starts at 0.

let animals = ["dog", "cat", "rabbit"];

console.log(animals[0]); // dog
console.log(animals[2]); // rabbit

Array Methods (Most Common)

Looping Through Arrays -

Using for loop:

let fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Using for...of:

for(let fruit of fruits) {
  console.log(fruit);
}

Using forEach():

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Example

let scores = [10, 20, 30, 40];

// Add a score
scores.push(50);
// [ 10, 20, 30, 40, 50 ]

// Remove first score
scores.shift();
//[ 20, 30, 40, 50 ]

// Find score
console.log(scores.includes(30)); 
// true

// Sum all scores
let sum = 0;
for (let score of scores) {
  sum += score;
}
console.log("Total:", sum);
// Total: 140

Nested Arrays (2D Arrays)

let matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];

console.log(matrix); //[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
console.log(matrix[1][0]); // 3

JavaScript arrays are dynamic and can hold mixed data types (but avoid that in practice).

let mixed = [1, "hello", true, null];