JavaScript Code Blocks and Scope

In JavaScript, a code block is a section of code wrapped in {} curly braces. Code blocks are used to group statements together, control the execution flow, and define the scope of variables.

1. Block Scope

Before ES6, JavaScript only had function scope for variables declared with var. Variables declared with var could leak outside blocks like if or for, causing unexpected behavior.

ES6 introduced let and const, which provide block-level scope, meaning the variable exists only inside the block where it was defined.

Syntax:

{
  // code block
  let x = 10;
  const y = 20;
  var z = 30; // function scoped, not block scoped
}

Example 1: Block scope with let/const

{
  let name = "Alice";
  const age = 25;
  console.log(name, age); // Alice 25
}
console.log(name); // ReferenceError: name is not defined
console.log(age);  // ReferenceError: age is not defined

Example 2: var vs let inside a block

{
  var x = 10;
  let y = 20;
}
console.log(x); // 10 (var is function/global scoped)
console.log(y); // ReferenceError: y is not defined (let is block scoped)

2. Code Blocks in Control Structures

Code blocks are often used in control structures such as if, for, while, and switch to group multiple statements.

Syntax:

if (condition) {
  // multiple statements
}

for (let i = 0; i < 5; i++) {
  // multiple statements
}

Example 1: if statement block

let age = 18;
if (age >= 18) {
  let status = "Adult";
  console.log(status); // Adult
}
console.log(status); // ReferenceError: status is not defined

Example 2: for loop block

for (let i = 0; i < 3; i++) {
  const square = i * i;
  console.log(square);
}
// Output: 0, 1, 4
console.log(i);      // ReferenceError: i is not defined
console.log(square); // ReferenceError: square is not defined

Example 3: while loop block

let count = 0;
while (count < 3) {
  let message = `Count is ${count}`;
  console.log(message);
  count++;
}
// message is not accessible outside the while block

Example 4: switch case with blocks

let fruit = "apple";
switch(fruit) {
  case "apple": {
    let color = "red";
    console.log(color); // red
    break;
  }
  case "banana": {
    console.log("yellow");
    break;
  }
}
// color is not accessible outside the case block