Function scope in Javascript - Step-by-Step Execution

Concept Flow - Function scope

Enter function

↓

Create local variables

↓

Execute function body

↓

Access local variables inside function

↓

Exit function

↓

Local variables destroyed

↓

Try to access local variables outside? --> ReferenceError

When a function runs, it creates its own space for variables. These variables only exist inside the function and disappear when it ends.

Execution Sample

Javascript

function greet() {
  let message = 'Hello';
  console.log(message);
}
greet();
console.log(message);

This code shows a variable inside a function that cannot be used outside.

Execution Table

Step	Action	Variable 'message'	Output	Notes
1	Function greet() is defined	undefined		No variables created yet
2	Call greet()	undefined		Enter function scope
3	Create local variable message = 'Hello'	'Hello'		message exists only inside greet
4	console.log(message)	'Hello'	Hello	Prints 'Hello' inside function
5	Function greet() ends	undefined		Local variable destroyed
6	console.log(message) outside	undefined	ReferenceError	message not defined outside function

💡 Function ends and local variables are removed; accessing them outside causes ReferenceError

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
message	undefined	'Hello'	undefined	undefined

Key Moments - 2 Insights

Why can't we use the variable 'message' outside the function?

Because 'message' is created inside the function and only exists there. After the function ends (see step 5), it is removed, so outside the function (step 6) it causes a ReferenceError.

Does the variable 'message' exist before the function is called?

No, 'message' is created only when the function runs (step 3). Before that, it is undefined.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'message' after step 3?

A ReferenceError

B 'Hello'

C undefined

D null

💡 Hint

Check the 'Variable message' column at step 3 in the execution table.

At which step does the function 'greet' end and local variables get destroyed?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Action' and 'Notes' columns for when the function ends.

If we move 'console.log(message)' inside the function after step 3, what will happen?

A It will print 'Hello'

B It will cause ReferenceError

C It will print undefined

D It will print null

💡 Hint

See step 4 where console.log(message) inside the function prints 'Hello'.

Concept Snapshot

Function scope means variables declared inside a function exist only there.
They are created when the function runs and destroyed when it ends.
Trying to access them outside causes a ReferenceError.
Use console.log inside the function to see local variables.
Variables outside functions are global and accessible everywhere.

Full Transcript

This visual shows how function scope works in JavaScript. When the function greet() is called, it creates a local variable message with value 'Hello'. This variable exists only inside the function. The console.log inside the function prints 'Hello'. After the function ends, the variable message is destroyed. Trying to access message outside the function causes a ReferenceError because it does not exist there. This shows that variables inside functions are private to that function and cannot be used outside.