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.

Practice

1. What does the scope chain in JavaScript help with?

easy

A. Sorting arrays automatically

B. Finding variables by checking current and outer scopes

C. Managing asynchronous code execution

D. Styling HTML elements dynamically

Solution

1. Step 1: Understand the role of scope chain

   The scope chain is a mechanism JavaScript uses to look for variables starting from the current scope and moving outward.

2. Step 2: Compare options with scope chain definition

   Only Finding variables by checking current and outer scopes correctly describes this behavior; others describe unrelated concepts.

3. Final Answer:

   Finding variables by checking current and outer scopes -> Option B

4. Quick Check:

   Scope chain = variable lookup [OK]

Hint: Scope chain = variable search from inner to outer [OK]

Common Mistakes:

• Confusing scope chain with asynchronous behavior
• Thinking scope chain sorts or styles elements
• Mixing scope chain with event handling

2. Which of the following is the correct way to declare a variable accessible only inside a function in JavaScript?

easy

A. function x() {}

B. const x = 10;

C. var x = 10;

D. let x = 10;

Solution

1. Step 1: Identify function-scoped variable declarations

   Variables declared with var are function-scoped, meaning they are accessible anywhere within the function.

2. Step 2: Check accessibility inside a function

   Declaring var x = 10; inside a function limits x to that function's scope.

3. Final Answer:

   var x = 10; -> Option C

4. Quick Check:

   Use var for function-scoped variables [OK]

Hint: Use var for variables inside functions [OK]

Common Mistakes:

• Using let or const which are block-scoped
• Confusing function declaration with variable declaration

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

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

medium

A. 10

B. 5

C. undefined

D. ReferenceError

Solution

1. Step 1: Understand variable shadowing in nested functions

   The inner function looks for x in its own scope, then outer scopes. It finds x = 10 in outer().

2. Step 2: Determine the logged value

   Since inner() uses the x from outer(), it logs 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Inner function uses nearest x = 10 [OK]

Hint: Inner uses closest variable named x [OK]

Common Mistakes:

• Thinking it logs global x = 5
• Expecting undefined because inner has no x
• Confusing with ReferenceError due to scope

4. Find the error in this code related to scope chain:

function test() {
  console.log(a);
  let a = 3;
}
test();

medium

A. No error, logs 3

B. SyntaxError due to let usage

C. Logs undefined

D. ReferenceError because a is used before declaration

Solution

1. Step 1: Understand temporal dead zone with let

   Variables declared with let are not accessible before their declaration inside their scope.

2. Step 2: Analyze console.log usage before declaration

   Using a before let a = 3; causes a ReferenceError due to temporal dead zone.

3. Final Answer:

   ReferenceError because a is used before declaration -> Option D

4. Quick Check:

   let variables can't be accessed before declaration [OK]

Hint: let variables cause ReferenceError if accessed early [OK]

Common Mistakes:

• Assuming var behavior with undefined
• Thinking no error occurs
• Confusing with SyntaxError

5. Consider this code:

let x = 1;
function outer() {
  let x = 2;
  function inner() {
    let x = 3;
    console.log(x);
  }
  inner();
  console.log(x);
}
outer();
console.log(x);

What is the output sequence?

hard

A. 3, 2, 1

B. 1, 2, 3

C. 3, 3, 3

D. 2, 3, 1

Solution

1. Step 1: Trace inner function console.log(x)

   Inside inner(), x is 3, so it logs 3.

2. Step 2: Trace outer function console.log(x)

   After inner(), outer() logs its own x which is 2.

3. Step 3: Trace global console.log(x)

   Outside all functions, global x is 1, so it logs 1.

4. Final Answer:

   3, 2, 1 -> Option A

5. Quick Check:

   Each scope logs its own x value [OK]

Hint: Each console.log uses nearest x in its scope [OK]

Common Mistakes:

• Assuming all logs print global x
• Mixing order of outputs
• Ignoring variable shadowing in inner scopes