Scope chain in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested function with variable shadowing

What is the output of this JavaScript code?

Javascript

let x = 10;
function outer() {
  let x = 20;
  function inner() {
    console.log(x);
  }
  inner();
}
outer();

A 10

B 20

C undefined

D ReferenceError

💡 Hint

Remember that inner functions look for variables in their own scope first, then outer scopes.

The inner function finds the variable x in the outer function's scope, which is 20, so it prints 20.

❓ Predict Output

intermediate

Output of var in for loop with setTimeout

What will be logged to the console when this code runs?

Javascript

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

A 0 1 2

B 0 0 0

C undefined undefined undefined

D 3 3 3

💡 Hint

Consider how var variables are scoped and when the callbacks run.

The var variable i is function-scoped, so by the time the callbacks run, i is 3, so it logs 3 three times.

❓ Predict Output

advanced

Output of let in for loop with setTimeout

What will be logged to the console when this code runs?

Javascript

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

A undefined undefined undefined

B 3 3 3

C 0 1 2

D 0 0 0

💡 Hint

Think about how let variables are scoped in loops.

The let variable i is block-scoped and a new binding is created each loop iteration, so the callbacks log 0, 1, and 2 respectively.

❓ Predict Output

advanced

Output of variable lookup with nested scopes

What is the output of this code?

Javascript

const a = 1;
function f1() {
  const a = 2;
  function f2() {
    console.log(a);
  }
  f2();
}
f1();

A 2

B 1

C undefined

D ReferenceError

💡 Hint

Inner functions use the closest variable in their scope chain.

The inner function f2 finds a in f1's scope which is 2, so it logs 2.

🧠 Conceptual

expert

Scope chain and variable resolution order

Given the code below, what value will be logged to the console?

Javascript

let x = 5;
function outer() {
  let x = 10;
  function inner() {
    let x = 15;
    console.log(x);
  }
  inner();
}
outer();

A 15

B 10

C 5

D ReferenceError

💡 Hint

Variables are resolved starting from the innermost scope outward.

The inner function has its own x variable set to 15, so it logs 15.