Block scope in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of let inside block

What is the output of this code?

function test() {
  let x = 10;
  if (true) {
    let x = 20;
    console.log(x);
  }
  console.log(x);
}
test();

Javascript

function test() {
  let x = 10;
  if (true) {
    let x = 20;
    console.log(x);
  }
  console.log(x);
}
test();

A 20\n10

B 10\n20

C 20\n20

D 10\n10

💡 Hint

Remember that let creates a new variable scoped to the block.

The inner let x = 20 shadows the outer x only inside the if block. So inside the block, console.log prints 20. Outside, it prints the original 10.

❓ Predict Output

intermediate

var vs let in loops

What is the output of this code?

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

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}

Javascript

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

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}

A 3 3 3 0 1 2

B 0 1 2 0 1 2

C 3 3 3 3 3 3

D 0 1 2 3 3 3

💡 Hint

var is function scoped, let is block scoped inside the loop.

The var loop shares the same i variable, so all timeouts print 3 after the loop ends. The let loop creates a new j for each iteration, so timeouts print 0,1,2.

🧠 Conceptual

advanced

Block scope and closures

Consider this code:

const funcs = [];
for (let i = 0; i < 3; i++) {
  funcs.push(() => i);
}
console.log(funcs[0](), funcs[1](), funcs[2]());

What is the output?

Javascript

const funcs = [];
for (let i = 0; i < 3; i++) {
  funcs.push(() => i);
}
console.log(funcs[0](), funcs[1](), funcs[2]());

A undefined undefined undefined

B 3 3 3

C 0 1 2

D 0 0 0

💡 Hint

Each iteration has its own i because of let scoping.

Using let in the loop creates a new i for each iteration, so each function remembers its own i value.

❓ Predict Output

advanced

Temporal Dead Zone error

What error does this code produce?

{
  console.log(a);
  let a = 5;
}

Javascript

{
  console.log(a);
  let a = 5;
}

A TypeError

B ReferenceError

C SyntaxError

D undefined

💡 Hint

Variables declared with let are not accessible before declaration.

Accessing a let variable before its declaration causes a ReferenceError due to the temporal dead zone.

🔧 Debug

expert

Fixing unexpected output with var in block

This code intends to print numbers 0 to 2 with delay, but prints 3 three times.
Which option fixes it?

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

Javascript

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

A Move setTimeout outside the for loop

B Wrap setTimeout in an IIFE passing i as argument

C Declare i with const instead of var

D Replace var with let in the for loop declaration

💡 Hint

Block scope with let creates a new i each iteration.

Using let creates a new i for each loop iteration, so each timeout logs the correct value. The other options either cause errors or don't fix the problem.

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