Author: Saim Khalid

A closure is when a function remembers variables from its outer scope, even after the outer function has finished.

Example:

function outer() {
  let count = 0;
  return function inner() {
count++;
return count;
  };
}

let counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

Here, inner() remembers count from outer().

• == → loose equality, converts data types before comparison.
• === → strict equality, checks value and type.

Example:

console.log(5 == "5");  // true  (type conversion)
console.log(5 === "5"); // false (strict check)

• var → Function-scoped, can be redeclared. (Older way, avoid in modern JS)
• let → Block-scoped, can be updated but not redeclared in the same scope.
• const → Block-scoped, cannot be updated (immutable reference).

Example:

var x = 10; // function scoped
let y = 20; // block scoped
const z = 30; // constant

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // Spread
console.log(arr2); // [1, 2, 3, 4, 5]

function sum(...nums) { // Rest
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(5, 10, 15)); // 30

Explanation:

• ... (spread) copies values.
• ... (rest) collects multiple arguments.

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

console.log(numbers.map(n => n * 2)); // [20, 40, 60, 80]
console.log(numbers.filter(n => n > 20)); // [30, 40]
console.log(numbers.reduce((a, b) => a + b, 0)); // 100

Explanation:

• map() → transforms values.
• filter() → selects values that match condition.
• reduce() → accumulates into one value.

let day = 3;

switch (day) {
  case 1: console.log("Monday"); break;
  case 2: console.log("Tuesday"); break;
  case 3: console.log("Wednesday"); break;
  default: console.log("Invalid day");
}

Explanation:

• switch is used instead of multiple if-else.
• Since day = 3, output → Wednesday.

let count = 1;
while (count <= 5) {
  console.log("Count: " + count);
  count++;
}

Explanation:

• while runs as long as the condition is true.
• Prints Count: 1 to Count: 5.

---

HTML

<p id="text">Hello!</p>
<button onclick="changeText()">Change Text</button>

JavaScript

function changeText() {
  document.getElementById("text").innerHTML = "Text Changed!";
}

Explanation:

• document.getElementById("text") selects the <p> element.
• .innerHTML changes its cotent.

const add = (a, b) => a + b;

console.log(add(5, 3)); // 8

Explanation:

• Arrow functions are a shorter way to write functions.
• add(5,3) returns 8.

HTML

<button onclick="sayHello()">Click Me</button>

JavaScript

function sayHello() {
  alert("Hello! You clicked the button.");
}

Explanation:

• onclick calls the sayHello() function.
• alert() shows a popup message.