One of the most frequently asked JavaScript interview questions is:
What is a closure in JavaScript?
Many developers memorize the definition:
"A closure is a function bundled together with its lexical environment."
While technically correct, interviewers usually want to know:
- Why closures exist
- How closures work internally
- Where closures are used in real applications
- Common closure pitfalls
- How closures relate to scope and memory
Let's understand closures from first principles.
1. What Problem Do Closures Solve?#
Consider this example:
function greet() {
const name = "John";
console.log(name);
}
greet();
Output:
John
After the function finishes:
Execution Context Removed
Normally, local variables disappear.
Now imagine we want access to those variables later.
Closures make this possible.
2. What is a Closure?#
A closure is created when a function remembers variables from its outer scope even after that outer function has finished executing.
Example:
function outer() {
const name = "John";
function inner() {
console.log(name);
}
return inner;
}
const greet = outer();
greet();
Output:
John
Important observation:
outer() already finished executing
Yet:
inner();
still accesses:
name;
This is a closure.
Why Does This Work?#
When JavaScript creates a function, it stores:
Function Code
+
Reference To Outer Scope
Conceptually:
inner
↓
Lexical Environment
↓
name = "John"
Even after:
outer();
finishes execution, JavaScript keeps the referenced variables alive because the returned function still needs them.
3. Lexical Scope vs. Closure#
These terms are often confused.
Lexical Scope#
Determines where variables can be accessed.
Example:
function outer() {
const name = "John";
function inner() {
console.log(name);
}
}
Because:
inner;
is written inside:
outer;
it can access:
name;
This is lexical scope.
Closure#
When a function continues accessing those variables after the outer function has completed execution.
Example:
const fn = outer();
fn();
This is a closure.
Visual Representation#
outer()
├── name = "John"
└── returns inner()
inner()
↓
Remembers
↓
name = "John"
Closure Interview Example#
function createCounter() {
let count = 0;
return function () {
count++;
console.log(count);
};
}
const counter = createCounter();
counter();
counter();
counter();
Output:
1
2
3
Why?
Because:
count;
remains available through the closure.
4. Encapsulation: Private Variables#
Closures are commonly used for data encapsulation.
Example:
function createBankAccount() {
let balance = 1000;
return {
deposit(amount) {
balance += amount;
},
getBalance() {
return balance;
},
};
}
Usage:
const account = createBankAccount();
account.deposit(500);
console.log(account.getBalance());
Output:
1500
But:
console.log(account.balance);
Output:
undefined
The variable remains private.
5. Real-World Use Cases (Event Handlers & Debounce)#
Closures are everywhere in frontend development.
Example:
function setupButton(buttonId) {
const id = buttonId;
document.getElementById(id).addEventListener("click", () => {
console.log(id);
});
}
The event handler remembers:
id;
through a closure.
Real Frontend Example: Debounce#
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
}, delay);
};
}
Why does debounce work?
Because the returned function remembers:
timer;
via a closure.
Real Frontend Example: React Hooks#
Consider:
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
console.log(count);
}
return <button onClick={handleClick}>Click</button>;
}
The event handler has access to:
count;
through closures.
React relies heavily on closure behavior.
Common Interview Question#
What is the output?
function outer() {
let count = 0;
return function () {
count++;
console.log(count);
};
}
const fn1 = outer();
const fn2 = outer();
fn1();
fn1();
fn2();
Answer#
Output:
1
2
1
Why?
Each call to:
outer();
creates a new closure.
fn1 → count
fn2 → count
Separate memory.
6. Classic Interview Trap: Loop & Var#
What is the output?
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 100);
}
Answer#
Output:
3
3
3
Why?
All callbacks share the same variable:
i;
By the time the callbacks execute:
i === 3;
Fix Using let#
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 100);
}
Output:
0
1
2
Because:
let;
creates a new binding for each iteration.
Fix Using Closure#
for (var i = 0; i < 3; i++) {
(function (current) {
setTimeout(() => {
console.log(current);
}, 100);
})(i);
}
Output:
0
1
2
The closure preserves each value.
7. Closures and Memory Management#
A common senior-level interview question:
Can closures cause memory leaks?
Answer:
Yes
Closures keep references alive.
Example:
function hugeData() {
const data = new Array(1000000);
return function () {
console.log(data.length);
};
}
As long as the returned function exists:
data;
cannot be garbage collected.
When Are Closures Created?#
Closures are created:
At Function Creation Time
not when the function executes.
Example:
function outer() {
const name = "John";
return function inner() {
console.log(name);
};
}
When:
inner;
is created, JavaScript captures its lexical environment.
8. Common Interview Q&A#
Do Closures Copy Variables?#
No.
Closures maintain references to variables.
Example:
function outer() {
let count = 0;
return {
increment() {
count++;
},
getCount() {
return count;
},
};
}
Both functions access the same variable.
Are Closures Only Created When Returning Functions?#
No.
Closures occur whenever a function accesses variables from an outer scope.
Example:
function outer() {
const name = "John";
function inner() {
console.log(name);
}
inner();
}
A closure still exists.
Why Are Closures Useful?#
Closures enable:
- Data privacy
- Function factories
- Event handlers
- Debouncing
- Throttling
- Memoization
- React Hooks
Can Closures Access Global Variables?#
Yes.
Example:
const company = "FrontendPrep";
function greet() {
console.log(company);
}
The closure includes references to outer scopes.
Function Factory Example#
Closures are commonly used to generate customized functions.
function multiply(multiplier) {
return function (number) {
return number * multiplier;
};
}
const double = multiply(2);
const triple = multiply(3);
Usage:
double(5);
Output:
10
Usage:
triple(5);
Output:
15
Each function has its own closure.
Senior-Level Interview Answer#
A closure is formed when a function retains access to variables from its lexical scope even after the outer function has completed execution. JavaScript functions capture references to their surrounding environment at creation time, allowing those variables to remain accessible later. Closures power many important JavaScript patterns including data encapsulation, event handlers, debouncing, throttling, memoization, and React Hooks. While closures are extremely useful, they can also increase memory usage because referenced variables cannot be garbage collected until all closures referencing them are removed.
Common Interview Mistakes#
❌ "Closures copy variables."
Correct:
Closures keep references to variables.
❌ "Closures only happen when functions are returned."
Correct:
Closures occur whenever a function accesses an outer scope.
❌ "Closures are a feature."
Correct:
Closures are a natural consequence of lexical scoping.
❌ "Closures are only used in advanced JavaScript."
Correct:
Closures are used constantly in modern frontend development.
Key Takeaways#
- Closure Mechanics: A function's ability to remember and access its lexical outer scope even when executed outside that scope.
- Encapsulation: Used in JavaScript to create private variables and hide internal component logic.
- Lexical Scope: Scope is determined at compile time based on where functions are declared in the codebase.
- Loop Variables: Classical closure trap where
varin a loop shares a single binding; solved using block-scopedlet. - Memory Overhead: Variables held in closures are not garbage-collected as long as the inner function reference persists.