Functions are the building blocks of JavaScript, and they are versatile enough to be used in many ways. Closures are one of the most powerful concepts in JavaScript, but they can be a bit tricky to understand at first. In this article, we will discuss what closures are, how they work, and provide examples to help you understand them better.
What Are Closures?
In JavaScript, a closure is created when a function is defined inside another function. The inner function has access to the outer function's variables, even after the outer function has returned. The inner function can access the outer function's variables because it has a reference to the outer function's scope. This reference to the outer function's scope is called closure.
How Do Closures Work in JavaScript?
To understand how closures work in JavaScript, let's take a look at an example. Suppose we have a function called output that contains another function called inner.
function output() {
function inner() {
console.log('inner function');
}
return inner;
}
In this example, the output function returns a reference to the inner function. We can call the output function and get a reference to the inner function like this:
const innerFunction = output();
Now, we can call the inner function like this:
innerFunction();
When we call the innerFunction function, it executes the inner function and logs inner function to the console. This is because the inner function has access to the output function's variables through the closure.
Examples of Closures in JavaScript
Let's look at some more examples to see how closures work in different scenarios.
Example 1: Counter
Suppose we want to create a counter that increments a value each time it is called. We can use a closure to achieve this:
function counter() {
let count = 0;
function inner() {
count++;
console.log(count);
}
return inner;
}
const increment = counter();
increment(); // logs 1
increment(); // logs 2
increment(); // logs 3
In this example, the counter function returns a reference to the inner function. The inner function has access to the count variable through the closure. Each time we call the inner function, it increments the count variable and logs it to the console.
Example 2: Private Variables
Suppose we want to create a function that has a private variable that cannot be accessed from outside the function. We can use a closure to achieve this:
function secret() {
let password = '1234';
function inner() {
console.log(password);
}
return inner;
}
const getSecret = secret();
getSecret(); // logs '1234'
In this example, the secret function returns a reference to the inner function. The inner function has access to the password variable through the closure. We cannot access the password variable from outside the secret function.
Conclusion
In conclusion, closures are an important and powerful concept in JavaScript. They allow us to create functions that have access to variables in their parent scope, even after the parent function has returned. They are created when a function is defined inside another function and allow the inner function to access the variables and functions in the outer function's scope.
The content of this blog post was inspired by the JavaScript - Marathon Interview Questions Series 2023 course on Udemy