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.

Practice

1. Which keyword creates a variable that is limited to the block inside { } in JavaScript?

easy

A. function

B. var

C. let

D. global

Solution

1. Step 1: Understand block scope

   Block scope means variables exist only inside curly braces { }.

2. Step 2: Identify keywords that create block scope

   let and const create block-scoped variables, while var does not.

3. Final Answer:

   let -> Option C

4. Quick Check:

   Block scope = let [OK]

Hint: Remember: let and const are block scoped [OK]

Common Mistakes:

• Thinking var is block scoped
• Confusing function with variable declaration
• Assuming global is a keyword

2. Which of the following is the correct syntax to declare a block-scoped constant variable named score with value 10?

easy

A. var score = 10;

B. score = 10;

C. let score = 10;

D. const score = 10;

Solution

1. Step 1: Identify constant declaration syntax

   To declare a constant, use const followed by the variable name and value.

2. Step 2: Check block scope and immutability

   const creates a block-scoped variable that cannot be reassigned.

3. Final Answer:

   const score = 10; -> Option D

4. Quick Check:

   Constant declaration = const [OK]

Hint: Use const for constants, let for variables [OK]

Common Mistakes:

• Using var which is not block scoped
• Omitting let or const
• Trying to reassign a const variable

3. What will be the output of the following code?

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

medium

A. "undefined"

B. "ReferenceError"

C. "object"

D. "number"

Solution

1. Step 1: Understand variable scope of let

   The variable x is declared with let inside the if block, so it exists only inside that block.

2. Step 2: Check access outside the block

   typeof on an undeclared variable returns "undefined". Direct access like console.log(x) would throw ReferenceError.

3. Final Answer:

   "undefined" -> Option A

4. Quick Check:

   typeof undeclared = "undefined" [OK]

Hint: typeof returns "undefined" for undeclared vars, no error [OK]

Common Mistakes:

• Thinking it throws ReferenceError (confuses with direct access)
• Confusing var and let scope
• Expecting "number"

4. Find the error in this code snippet:

if (true) {
  var y = 10;
}
console.log(y);

medium

A. SyntaxError: Missing semicolon

B. No error, outputs 10

C. TypeError: y is not a function

D. ReferenceError: y is not defined

Solution

1. Step 1: Understand var scope

   var is function-scoped or global-scoped, not block-scoped, so y is accessible outside the if block.

2. Step 2: Check console output

   Since y is defined, console.log(y) outputs 10 without error.

3. Final Answer:

   No error, outputs 10 -> Option B

4. Quick Check:

   var ignores block scope [OK]

Hint: var ignores block scope, accessible outside blocks [OK]

Common Mistakes:

• Expecting ReferenceError for var
• Confusing block scope with function scope
• Thinking semicolon missing causes error

5. Consider this code:

function test() {
  if (true) {
    let a = 1;
    var b = 2;
  }
  console.log(b);
  console.log(a);
}
test();

What will happen when this code runs?

hard

A. Logs 2, then ReferenceError for a

B. Logs 1 and 2

C. ReferenceError for b, then logs 1

D. SyntaxError due to mixed declarations

Solution

1. Step 1: Analyze let a scope

   a is declared with let inside the if block, so it is not accessible outside that block.

2. Step 2: Analyze var b scope

   b is declared with var, which is function-scoped, so it is accessible anywhere inside test().

3. Step 3: Predict console output

   Logging b outputs 2 because it is function-scoped. Logging a causes a ReferenceError because it is out of scope.

4. Final Answer:

   Logs 2, then ReferenceError for a -> Option A

5. Quick Check:

   let block scope hides a, var function scope shows b [OK]

Hint: let is block scoped; var is function scoped [OK]

Common Mistakes:

• Expecting both variables accessible
• Confusing let and var scopes
• Thinking mixed declarations cause syntax error