JavaScript Closures: Top Interview Questions and Answers.
1. What is a closure in JavaScript?
Answer:
In JavaScript, a closure is created when an inner function is defined within an outer function and has access to the outer function's variables and parameters. Even after the outer function has finished executing, the inner function retains access to those variables.
2. Why are closures important in JavaScript?
Answer:
Closures are important in JavaScript because they allow for data encapsulation and function privacy. They help in maintaining a clean global scope and enable the creation of private variables that are inaccessible from the outside, which is a fundamental aspect of object-oriented programming.
3. Can you give an example of a closure in JavaScript?
Answer:
function outerFunction() {
var outerVariable = "Hello, ";
function innerFunction(name) {
console.log(outerVariable + name);
}
return innerFunction;
}
var inner = outerFunction();
inner("John"); // Output: "Hello, John"
In this example, innerFunction is a closure because it has access to the outerVariable defined in outerFunction even after outerFunction finishes executing.
4. How do you use a closure in JavaScript?
Answer:
In JavaScript, you use a closure by defining an inner function within an outer function and returning the inner function. The inner function retains access to the outer function's variables and parameters, even after the outer function has completed execution.
5. What will be the output of the following code?
function outer() {
var x = 10;
function inner() {
console.log(x);
}
return inner;
}
var innerFunc = outer();
innerFunc();
Answer:
Output: 10
Explanation: The outer function returns inner, and inner has access to the variable x declared inside outer. When innerFunc is called, it logs x, which is 10.
6. What will be the output of the following code?
function outer() {
var x = 10;
function inner() {
console.log(x);
}
x = 20;
return inner;
}
var innerFunc = outer();
innerFunc();
Answer:
Output: 20
Explanation: The value of x is updated to 20 before inner is returned. When innerFunc is called, it logs the updated value of x, which is 20.
7. What will be the output of the following code?
function outer() {
var x = 10;
function inner() {
var y = 5;
console.log(x + y);
}
return inner;
}
var innerFunc = outer();
innerFunc(); // Output: 15
Answer:
Output: 15
Explanation: inner has access to both x (10) from the outer function and y (5) from its own scope, so the output is 15.
8. What will be the output of the following code?
function outer() {
var x = 10;
function inner() {
var y = 5;
console.log(x + y);
}
var x = 20;
return inner;
}
var innerFunc = outer();
innerFunc();
Answer:
Output: 25
Explanation: The variable x is re-assigned to 20 inside the outer function before the inner function is returned. When innerFunc is called, it logs x + y, which is 20 + 5 = 25.
9. What will be the output of the following code?
function outer() {
var x = 10;
function inner() {
var y = 5;
console.log(x + y);
x = 20;
}
return inner;
}
var innerFunc = outer();
innerFunc();
innerFunc();
Answer:
Output:
First call: 15
Second call: 25
Explanation: On the first call, x is 10, and y is 5, so the output is 15. After updating x to 20, the second call logs 20 + 5, which is 25.
10. When to use closure in JavaScript?
Answer:
You use closures when you need to maintain private state or encapsulate variables that are not accessible from the global scope. They are useful for creating data privacy, especially in situations where you want to restrict access to certain variables and control the scope in which they can be accessed or modified.
11. What is closure vs callback?
Answer:
Closures and callbacks are two distinct concepts in JavaScript. A closure is a function that remembers the environment in which it was created, and it can access variables from an outer function even after that function has returned. A callback, on the other hand, is a function passed as an argument to another function and is executed after the outer function has completed.
12. What are the two types of closure?
Answer:
In JavaScript, there are two types of closures: lexical closures and dynamic closures. Lexical closures are created during the compile-time and have access to variables in the lexical scope, while dynamic closures are created at runtime and have access to variables in the dynamic scope.
13. Is Lambda the same as closure?
**Answer:*
In JavaScript, a lambda function is just an anonymous function created on the fly without a name. A closure, on the other hand, is a function that retains access to variables from an outer function even after the outer function has returned. Although lambda functions can create closures, they are not the same.
14. What is the difference between currying and closure?
Answer:
Currying is the process of transforming a function that takes multiple arguments into a sequence of functions, each taking one argument. A closure, on the other hand, is a function that has access to variables from an outer function’s scope. Currying can use closures, but they are different concepts.
15. Is closure the same as encapsulation?
Answer:
Closures and encapsulation are related but not the same. Encapsulation refers to the concept of bundling data and methods that operate on that data within a single unit, often a class, and restricting access to some of the object's components. A closure involves a function having access to variables from its outer function, and while closures can be used to encapsulate data, they are not synonymous with encapsulation.
16. Does JavaScript support nested functions? How do they work?
Answer:
Yes, JavaScript supports nested functions. A nested function is defined inside another function, and it can access the variables and parameters of its outer function. This allows for closures, encapsulation, and modular code structures.
function sayHiBye(firstName, lastName) {
// helper nested function to use below
function getFullName() {
return firstName + ' ' + lastName;
}
console.log('Hello, ' + getFullName());
console.log('Bye, ' + getFullName());
}
17. Can you explain what is the Lexical Environment in JavaScript?
Answer:
In JavaScript, the Lexical Environment is a structure that holds variable bindings, functions, and other references to values within a particular scope. It is a key part of JavaScript’s execution context and helps in determining how variables are accessed and resolved during runtime.
18. How does garbage collection work with the Lexical Environment and nested functions in JavaScript?
Answer:
In JavaScript, garbage collection is the process of reclaiming memory used by objects that are no longer needed. When a function is created and a closure is formed, the lexical environment, which stores references to variables, may prevent the memory from being collected until the closure is no longer in use.
function f() {
let value = 123;
return function () {
console.log(value);
};
}
let g = f(); // g.[[Environment]] stores a reference to the Lexical Environment
// While g exists, the value stays in memory
g = null; // Now the memory is cleaned up
19. What are the common use cases of closures in JavaScript?
Answer:
Common use cases for closures include data encapsulation, function factories, memoization, implementing decorators, and maintaining state in asynchronous programming.
20. What are the advantages of using closures in JavaScript?
Answer:
Closures in JavaScript provide several advantages, such as privacy, function factories, and the ability to maintain state between function calls. They allow for more powerful, maintainable, and modular code, and support functional programming paradigms in JavaScript.
21. What are the disadvantages or pitfalls when working with closures in JavaScript?
Answer:
Working with closures can lead to potential pitfalls such as memory leaks if closures are not properly managed, keeping unwanted references to variables in memory, or accidentally modifying outer variables when not intended.
22. How do closures affect JavaScript's garbage collection mechanism?
Answer:
Closures impact garbage collection by keeping references to variables in memory even after the outer function has finished executing. This can prevent garbage collection from freeing up memory if the closure holds a reference to an object that is no longer needed.
🔗 Connect with me on LinkedIn:
Let’s dive deeper into the world of software engineering together! I regularly share insights on JavaScript, TypeScript, Node.js, React, Next.js, data structures, algorithms, web development, and much more. Whether you're looking to enhance your skills or collaborate on exciting topics, I’d love to connect and grow with you.
Follow me: Nozibul Islam
Top comments (2)
Whilst this is true, it doesn't tell the full story. A closure is actually created every time a function is created - regardless of nesting, which is entirely irrelevant.
This is not correct. Closures are not functions.
dev.to/jonrandy/misconceptions-abo...
thank you so much.