Understanding Closures in JavaScript: A Complete Beginner Guide

closure;
In Javascript,closure is a feature.Closure is an inner function is retains accces to the variables of its outer(enclosing) function,even after that outer function has finished executing.A closure is the combination of a function and the lexical environment in which it was declared.

output:

Explanation:
Step 1:
outerFunction() runs
let count = 0;

Variable count is created.

Memory:

count = 0

Step 2:
innerFunction is created
function innerFunction() {
count++;
console.log("Count:", count);
}

innerFunction uses count from its parent function.

Step 3:
Return inner function
return innerFunction;
const counter = outerFunction();

Now counter stores innerFunction.

Normally outerFunction() would finish and remove its variables from memory.

But because innerFunction still needs count, JavaScript keeps count alive.

This is called Closure.

Step 4:
First call
counter();

Runs:

count++;

Before:

count = 0

After:

count = 1

Output:

Count: 1

flow view:
outerFunction()
|
count = 0
|
return innerFunction
|
counter()
|
count = 1

counter()
|
count = 2

counter()
|
count = 3

counter()
|
count = 4