Block scope in Javascript - Step-by-Step Execution

Concept Flow - Block scope

Enter block { }

↓

Declare variables with let/const

↓

Use variables inside block

↓

Exit block

↓

Variables declared with let/const are NOT accessible outside

Block scope means variables declared with let or const exist only inside the curly braces { } where they are declared.

Execution Sample

Javascript

if (true) {
  let x = 5;
  console.log(x);
}
console.log(x);

This code shows a variable x declared inside an if block and tries to use it outside, causing an error.

Execution Table

Step	Action	Variable State	Output	Notes
1	Enter if block	x: undefined		Block starts
2	Declare let x = 5	x: 5		x is created inside block
3	console.log(x)	x: 5	5	x is accessible inside block
4	Exit if block	x: undefined (outside block)		x is not accessible outside
5	console.log(x)	ReferenceError	ReferenceError: x is not defined	x is not found outside block

💡 Execution stops with ReferenceError because x is block scoped and not accessible outside the if block.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
x	undefined	5 (inside block)	undefined (outside block)	undefined (outside block)

Key Moments - 2 Insights

Why does console.log(x) outside the block cause an error?

Because x is declared with let inside the block, it only exists inside that block. Outside, x is not defined, as shown in execution_table step 5.

Can variables declared with var inside a block be accessed outside?

Yes, var ignores block scope and is function or global scoped, but let and const respect block scope, as shown by the error in step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of x at Step 3?

A 5

B undefined

C ReferenceError

D null

💡 Hint

Check the Variable State column at Step 3 in the execution_table.

At which step does the program throw a ReferenceError?

A Step 3

B Step 5

C Step 2

D Step 4

💡 Hint

Look at the Output column in the execution_table for the error message.

If x was declared with var instead of let inside the block, what would happen at Step 5?

A ReferenceError

B undefined

C 5

D null

💡 Hint

Recall that var does not have block scope, so x would be accessible outside the block.

Concept Snapshot

Block scope means variables declared with let or const exist only inside { } blocks.
Variables declared inside a block cannot be accessed outside.
Using let or const inside blocks helps avoid accidental global variables.
var ignores block scope and is function/global scoped.
Trying to access block-scoped variables outside causes ReferenceError.

Full Transcript

Block scope in JavaScript means variables declared with let or const only exist inside the curly braces { } where they are declared. In the example, x is declared inside an if block with let. Inside the block, x has the value 5 and can be used. But outside the block, x does not exist, so trying to use it causes a ReferenceError. This shows how block scope protects variables from being accessed outside their intended area. Variables declared with var do not have block scope and can be accessed outside blocks, which can cause bugs. Using let and const helps keep variables contained and safer.