Practical closure use cases in Javascript - Step-by-Step Execution

Concept Flow - Practical closure use cases

Define outer function

↓

Create inner function

↓

Return inner function

↓

Call outer function -> get inner function

↓

Call inner function -> access outer variables

↓

Use closure for data privacy or state retention

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

Execution Sample

Javascript

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

This code creates a counter that remembers its count value between calls using closure.

Execution Table

Step	Action	count Value	Returned Value	Explanation
1	Call counter()	0	function (inner function)	Outer function runs, count initialized to 0, inner function returned
2	Call c() first time	1	1	Inner function increments count to 1 and returns it
3	Call c() second time	2	2	Inner function increments count to 2 and returns it
4	No more calls	2	-	Execution stops, count retains value 2 inside closure

💡 No more calls to inner function, closure retains count value 2

Variable Tracker

Variable	Start	After 1	After 2	Final
count	undefined	0 (in counter)	1 (after first c())	2 (after second c())

Key Moments - 3 Insights

Why does the inner function remember the variable 'count' even after counter() finished?

Because the inner function forms a closure that keeps access to 'count' from the outer function's scope, as shown in execution_table steps 2 and 3.

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

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

Can the variable 'count' be accessed directly from outside the closure?

No, 'count' is private inside the closure and can only be accessed or changed by calling the inner function.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the second call to c()?

A 2

B 1

C 0

D undefined

💡 Hint

Check the 'count Value' column at step 3 in the execution_table.

At which step does the inner function first increment 'count'?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' and 'count Value' columns in execution_table for when count changes from 0 to 1.

If we create a new counter by calling counter() again, what will be the initial 'count' value inside that new closure?

A 2

B 1

C 0

D undefined

💡 Hint

Refer to key_moments about new closures having their own separate 'count' starting at 0.

Concept Snapshot

Closure lets an inner function remember variables from its outer function.
Syntax: outer returns inner function that uses outer variables.
Use closures to keep data private or remember state.
Each closure has its own copy of variables.
Call outer function to get inner function with closure.
Call inner function to access or update closed-over variables.

Full Transcript

This visual execution shows how closures work in JavaScript using a counter example. The outer function 'counter' defines a variable 'count' and returns an inner function that increments and returns 'count'. When we call 'counter()', it returns the inner function which remembers 'count' even after 'counter' finishes. Each call to the inner function increases 'count' by 1 and returns it. The variable 'count' is private and cannot be accessed directly from outside. This example demonstrates practical use of closures for data privacy and state retention.