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.