Closures in Javascript - Step-by-Step Execution

Concept Flow - Closures

Define outer function

↓

Create inner function

↓

Return inner function

↓

Call outer function -> returns inner

↓

Call inner function

↓

Inner accesses outer's variables

↓

Use preserved variables even after outer ends

Closure happens when an inner function remembers and uses variables from its outer function even after the outer function has finished running.

Execution Sample

Javascript

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
counter();

This code creates a counter function that remembers how many times it was called by keeping 'count' inside a closure.

Execution Table

Step	Action	Variables State	Output
1	Call outer()	count = 0	Returns inner function
2	Assign returned inner to counter	count = 0 (inside closure)	No output
3	Call counter()	count = 0 -> count = 1	Returns 1
4	Call counter() again	count = 1 -> count = 2	Returns 2
5	Call counter() third time	count = 2 -> count = 3	Returns 3

💡 No more calls to counter(), closure preserves 'count' between calls

Variable Tracker

Variable	Start	After call 1	After call 2	After call 3
count	0	1	2	3

Key Moments - 3 Insights

Why does 'count' keep its value between calls to counter()?

Because the inner function forms a closure that keeps 'count' alive even after outer() finishes, as shown in execution_table rows 3-5.

Is 'count' accessible outside the outer() function directly?

No, 'count' is only accessible inside the inner function returned by outer(), so it is private and preserved in the closure.

What happens if we call outer() again and assign to a new variable?

A new closure with its own separate 'count' variable is created, independent from the first one.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after the second call to counter()?

A 3

B 1

C 2

D 0

💡 Hint

Check execution_table row 4 under Variables State showing count changes

At which step does the inner function get returned from outer()?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table row 1 where outer() returns the inner function

If we call outer() again and assign to a new variable, what happens to 'count' in the new closure?

A It shares the same 'count' as the first closure

B It resets 'count' to 0 for the new closure

C It causes an error

D It deletes the old 'count'

💡 Hint

Refer to key_moments explanation about creating new closures with separate variables

Concept Snapshot

Closures in JavaScript:
- Inner functions remember variables from outer functions.
- Variables stay alive after outer finishes.
- Useful for private data and counters.
- Syntax: function outer() { let x; return function inner() { use x } }
- Calling outer() returns inner with preserved variables.

Full Transcript

Closures happen when a function inside another function remembers the outer function's variables even after the outer function ends. In the example, outer() defines a variable 'count' and returns an inner function that increases and returns 'count'. When we call outer(), it returns this inner function, which keeps 'count' alive. Each time we call the returned function, 'count' increases by one. This shows how closures keep data private and persistent between calls. If we call outer() again, a new closure with a new 'count' starts fresh. This is useful for making counters or private variables in JavaScript.