Scope chain in Javascript - Step-by-Step Execution

Concept Flow - Scope chain

Start Execution

↓

Look for variable in current scope

↓

Found?

No→Go to outer scope

↓

Global scope reached?

↓

Use variable

↓

Continue execution

↓

End Execution

When JavaScript looks for a variable, it starts in the current scope and moves outward through outer scopes until it finds the variable or reaches the global scope.

Execution Sample

Javascript

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

This code shows how inner function accesses variable 'a' from its outer function scope.

Execution Table

Step	Action	Scope Checked	Variable Found	Value Used	Output
1	Call outer()	Global	N/A	N/A	N/A
2	Declare 'a' = 10	outer	N/A	10	N/A
3	Define inner()	outer	N/A	N/A	N/A
4	Call inner()	outer	N/A	N/A	N/A
5	console.log(a)	inner	No	N/A	N/A
6	Lookup 'a' in outer scope	outer	Yes	10	10
7	inner() returns	inner	N/A	N/A	N/A
8	outer() returns	outer	N/A	N/A	N/A

💡 Execution ends after outer() finishes; variable 'a' found in outer scope during inner() call.

Variable Tracker

Variable	Global Start	After outer() call	After inner() call	Final
a	undefined	10	10	undefined

Key Moments - 2 Insights

Why does inner() find variable 'a' even though it is not declared inside inner()?

Because inner() looks for 'a' in its own scope first, doesn't find it, then checks the outer scope where 'a' is declared (see execution_table step 6).

What happens if a variable is not found in any scope?

JavaScript throws a ReferenceError after reaching the global scope without finding the variable (not shown here but implied by exit_note).

Visual Quiz - 3 Questions

Look at the execution table, at which step is variable 'a' found and used?

A Step 6

B Step 5

C Step 4

D Step 2

💡 Hint

Check the 'Variable Found' and 'Value Used' columns in execution_table at step 6.

According to variable_tracker, what is the value of 'a' after inner() is called?

A null

B 10

C undefined

D ReferenceError

💡 Hint

Look at the 'After inner() call' column for variable 'a' in variable_tracker.

If variable 'a' was declared inside inner() instead of outer(), how would the scope chain change?

A Global scope would be checked first

B outer() would find 'a' in inner() scope

C inner() would find 'a' immediately in its own scope

D Variable 'a' would not be found

💡 Hint

Recall that variable lookup starts in the current scope before moving outward (see concept_flow).

Concept Snapshot

Scope chain in JavaScript:
- Variable lookup starts in current scope
- If not found, moves to outer scopes
- Continues until global scope
- If not found, ReferenceError thrown
- Inner functions access outer variables via scope chain

Full Transcript

This visual execution shows how JavaScript finds variables using the scope chain. When a function runs, it first looks for variables inside itself. If it doesn't find a variable, it looks in the outer function's scope, then the next outer scope, and so on until the global scope. If the variable is not found anywhere, JavaScript throws an error. In the example, the inner function accesses variable 'a' declared in the outer function. The execution table traces each step, showing where 'a' is found and used. The variable tracker shows 'a' keeps the value 10 throughout. Key moments clarify why inner can use 'a' and what happens if a variable is missing. The quiz tests understanding of these steps and the scope chain behavior.

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