Block scope, introduced in ECMAScript 2015 (ES6), is a fundamental concept in modern JavaScript that dictates the accessibility of variables. Variables declared with the let and const keywords are confined to the block in which they are defined, which can be a pair of curly braces {}, a function, or a loop. This is a significant improvement over the function-scoped var, as it helps prevent unintended variable overwrites and makes code more predictable and easier to debug. Understanding block scope is crucial for writing clean, efficient, and error-free JavaScript code.

Example 1: Basic let in a Block

// Example of let in a block scope
{
  let greeting = "Hello World!";
  console.log(greeting); // Output: Hello World!
}
// console.log(greeting); // This would cause a ReferenceError because greeting is not defined here.

Explanation

The let keyword declares the greeting variable, limiting its scope to the curly braces {}. It is accessible only within this block and cannot be accessed from outside, which helps in avoiding naming conflicts in larger scripts.

Example 2: const in a Block

// Example of const in a block scope
{
  const PI = 3.14159;
  console.log(PI); // Output: 3.14159
}
// PI = 3.14; // This would cause a TypeError because you cannot reassign a const.
// console.log(PI); // This would cause a ReferenceError.

Explanation

Similar to let, const is also block-scoped. The PI constant is only available within the defining block. This is essential for declaring variables that should not be reassigned.

Example 3: var vs. let in a Loop

// var is function-scoped, not block-scoped
for (var i = 0; i < 3; i++) {
  // ...
}
console.log(i); // Output: 3

// let is block-scoped
for (let j = 0; j < 3; j++) {
  // ...
}
// console.log(j); // This would cause a ReferenceError.

Explanation

This example highlights the key difference between var and let. The variable i declared with var "leaks" out of the loop's scope, while j declared with let does not, preventing potential bugs where the loop counter is unintentionally used outside the loop.

Example 4: Block Scope in Conditional Statements

// Using let within an if statement
let score = 85;
let grade;
if (score > 80) {
  let grade = "A";
  console.log(grade); // Output: A
}
// console.log(grade); // This would be undefined as the outer 'grade' was not assigned.

Explanation

The grade variable declared with let inside the if statement is a new variable, separate from the grade variable in the outer scope. This demonstrates how block scope isolates variables within conditional logic, making the code's behavior easier to reason about.

Example 5: Redeclaring Variables in Different Blocks

// Redeclaring the same variable name in different scopes
let x = 10;
console.log(x); // Output: 10

if (true) {
  let x = 20;
  console.log(x); // Output: 20
}

console.log(x); // Output: 10

Explanation

This code shows that you can declare variables with the same name in different blocks without conflict. The inner x shadows the outer x but only within its block. This feature of block scope is crucial for modular and maintainable code.

Example 6: Temporal Dead Zone (TDZ)

// Demonstrating the Temporal Dead Zone (TDZ)
{
  // console.log(myVar); // This would cause a ReferenceError.
  let myVar = "I am initialized";
  console.log(myVar); // Output: I am initialized
}

Explanation

Variables declared with let and const are not hoisted to the top of their block and initialized. The period from the start of the block until the declaration is called the Temporal Dead Zone, where accessing the variable results in an error, promoting better coding practices.

Example 7: Block Scope with Functions Inside Loops

// Using let to capture the correct value in a closure
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // Outputs: 0, 1, 2
  }, 100);
}

Explanation

Because let is block-scoped, a new i is created for each iteration of the loop. When the setTimeout callback function executes, it closes over this block-scoped i, preserving the correct value for each timeout, a common source of bugs with var.