Code Blocks

You will be able to explain how JavaScript braces create a block scope and use let and const to keep variables local to a block.

What it is

A code block is a group of statements wrapped in curly braces: { ... }. In JavaScript, braces do more than visually group code; they can create a lexical scope. A scope is the region of code where a variable name can be accessed. Variables declared with let, const, and class inside a block exist only inside that block. Variables declared with var do not respect block braces; they are scoped to the nearest function or global scope.

Think of a block as a fence. If you declare let blockScoped = true; inside the fence, code outside the fence cannot see it. Related terms include block scope, lexical scope, function scope, global scope, and shadowing.

Why it matters

• It prevents accidental variable leaks into larger parts of a program.
• It makes loops and conditional branches safer by limiting temporary variables.
• It reduces naming conflicts when different parts of code use the same variable names.
• It supports cleaner refactoring because a variable's lifetime is easy to see.
• It helps avoid common var hoisting surprises in modern JavaScript.

Syntax or steps

The smallest useful block-scope pattern is:

{
  let blockScoped = true;
}

1. Open a block with {.
2. Declare a variable with let or const.
3. Use the variable inside the block.
4. Close the block with }.
5. Remember that the variable is not available after the closing brace.

Example

function demo() {
  let outer = "visible outside block";

  if (true) {
    let blockScoped = true;
    const message = "inside block";
    console.log(blockScoped, message);
  }

  console.log(outer);
  // console.log(blockScoped); // ReferenceError
}

demo();

Part by part:

• function demo() { ... } creates a function scope.
• let outer is visible throughout the function.
• if (true) { ... } creates a block inside the function.
• blockScoped and message are only visible inside the if block.
• The commented line would throw a ReferenceError because blockScoped does not exist outside the block.

Common mistakes

• Using var and expecting block scope. Fix: use let or const when you need block scope.
• Accessing a block variable after the block ends. Fix: move the declaration outside the block or return the value from a function.
• Forgetting braces after if, for, or while. Fix: always use braces so the intended block is clear.
• Shadowing a variable accidentally. Fix: choose distinct names or keep blocks short so shadowing is intentional.

When to use it

Use block scope for small, local lifetimes inside a function. Use function scope or modules when you need reusable encapsulation across several statements or files.

Practice

Guided exercise: write a function that creates a block with let, logs the variable inside the block, then tries to log it outside the block.

function practice() {
  {
    let inside = "yes";
    console.log(inside);
  }
  // console.log(inside); // ReferenceError
}

practice();

Challenge: rewrite this code so i is not visible after the loop:

for (var i = 0; i < 3; i++) {
  console.log(i);
}
console.log(i);

Expected output after fixing: 0, 1, 2, then a ReferenceError for i. Hint: replace var with let.

Quick check

Question: Does let x = 1; inside { } make x available outside the braces?

Answer: No. let is block-scoped, so x exists only inside the block.

Summary

Braces create a boundary for block-scoped declarations in JavaScript. Use let and const inside blocks to keep variables local and predictable. This makes code safer, easier to read, and less likely to leak names into unrelated scopes.