10 Common JavaScript Interview Questions (With Answers)

10 Common JavaScript Interview Questions (With Answers) 10 Common JavaScript Interview Questions (With Answers)

A closure in JavaScript is a function that retains access to its lexical scope even when executed outside that scope. In simple terms, it’s when an inner function remembers variables from its outer function even after the outer function has finished executing. Closures are an essential concept for mastering JavaScript, particularly for asynchronous programming, callbacks, and functional programming techniques.

Why Closures Matter in JavaScript

Closures are the backbone of many JavaScript patterns. They make it possible to:

  • Create private variables

  • Maintain state in functions

  • Pass data securely in callbacks

  • Avoid polluting the global scope

They are widely used in modern frameworks and libraries like React, Vue, and Angular.

Basic Syntax of a Closure

Here’s a simple example of how closures work:

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

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

In this example, the inner function is a closure. It remembers the count variable from the outer function, even though outer has already finished running.

Real-World Use Case: Private Variables

Closures can be used to emulate private variables in JavaScript:

javascript
function createUser(name) {
let score = 0;
return {
getName: function () {
return name;
},
getScore: function () {
return score;
},
increaseScore: function () {
score++;
}
};
}

const user = createUser('Jane');
user.increaseScore();
console.log(user.getScore()); // 1

Here, score is not accessible directly—only through the returned methods. This is a common pattern for encapsulation in JavaScript.

10 Common JavaScript Interview Questions (With Answers)
10 Common JavaScript Interview Questions (With Answers)

Common Interview Question Involving Closures

One popular interview question goes like this:

Question: What will the following code output?

javascript
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}

Answer: It will print 3 three times. Why? Because var is function-scoped, and by the time the setTimeout runs, the loop has finished and i is 3.

Fix with Closure:

javascript
for (var i = 0; i < 3; i++) {
(function (j) {
setTimeout(function () {
console.log(j);
}, 1000);
})(i);
}

Now it prints 0, 1, 2 correctly because j is captured in a new closure each time.

Closures and Asynchronous Code

Closures shine in asynchronous JavaScript. Take this example with setTimeout:

javascript
function delayMessage(msg, delay) {
setTimeout(function () {
console.log(msg);
}, delay);
}

delayMessage("Hello after 2 seconds", 2000);

Even though delayMessage finishes execution quickly, the msg variable is remembered by the closure used in setTimeout.

Closures in Functional Programming

Closures are frequently used in currying and partial application:

javascript
function multiply(x) {
return function (y) {
return x * y;
};
}

const double = multiply(2);
console.log(double(5)); // 10

This is a classic closure-based pattern for functional code that’s clean and modular.

Potential Pitfalls of Closures

Closures can unintentionally keep variables in memory if not used carefully, leading to memory leaks:

  • Be cautious with closures in loops or long-lived functions

  • Avoid nesting too deeply

  • Don’t retain references longer than needed

Knowing when and how to release closures can help you avoid performance issues.

Conclusion

Closures are one of the most powerful features in JavaScript. Understanding them unlocks deeper control over variable scope, data privacy, and asynchronous behavior. Whether you’re creating custom hooks in React, managing private data in a module, or working with event handlers, closures are everywhere. With the examples and insights above, you’re now better equipped to use closures effectively in real-world JavaScript development.