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.