JavaScript closures can be a powerful tool for any developer, but they can also be a source of confusion and difficulty, especially for those new to the language. 

\
In fact, closures are a common topic that can be asked in coding interviews, so it’s important to have a solid understanding of their functionality. 

\
However, once you have a grasp on closures, they can greatly improve the efficiency of your code in certain situations, allowing you to build more robust applications. So, let’s dive right into the world of JavaScript closures and explore what they have to offer!

\
In JavaScript, closures are created when functions are defined inside other functions, giving them access to the outer function’s variables and parameters, even after the outer function has returned. 

\
This magic happens because the inner function has access to the entire scope chain of the outer function ([Lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#lexical_scoping)), including all the variables and parameters of the functions that enclose it. 

\
This may sound confusing, but it’s actually quite a simple yet powerful feature that allows developers to build more dynamic and efficient code.

\
To demonstrate how closures work in JavaScript, consider the following example:

```javascript
function outerFunction(x) {
  function innerFunction(y) {
    return x + y;
  }
  return innerFunction;
}

let newFunction = outerFunction(2);
console.log(newFunction(3)); // Output: 5
```

\
In this example, `outerFunction` returns `innerFunction`, which has access to `x` even after `outerFunction` has returned. When `newFunction` is called with the parameter `3`, it adds `x` (which is equal to `2`) to `y` (which is equal to `3`) and returns the sum, which is `5`. 

\
This is possible because of the closure created by `innerFunction` inside `outerFunction`.

 ![](https://cdn.hackernoon.com/images/ZooZQzFE7INYxlbDjBNNxqTpP8g2-6x93kr9.jpeg)

\
Closures are often used in JavaScript to create ==private variables== and functions that are inaccessible from outside the function, as well as to create **==*factory functions*==** that can generate new functions with different parameters.

## Creating Private Variables and Functions:

```javascript
function counter() {
  let count = 0;
  function increment() {
    count++;console.log(count);
  }
  return increment;
}

let incrementCounter = counter();
incrementCounter(); // Output: 1incrementCounter(); // Output: 2
```

\
In this example, `counter` returns `increment`, which has access to `count` even after `counter` has returned. This allows `increment` to increment `count` each time it is called, effectively creating a ==private== counter that is inaccessible from outside the function.

## Generating Factory Functions:

```javascript
function multiplier(x) {
  function inner(y) {
    return x * y;
  }
  return inner;
}

let double = multiplier(2);
console.log(double(3)); // Output: 6
let triple = multiplier(3);
console.log(triple(3)); // Output: 9
```

\
In this example, `multiplier` returns `inner`, which has access to `x` even after `multiplier` has returned. This allows `inner` to multiply `x` by any `y` that is passed to it, effectively creating a **==*factory function*==** that can generate new functions with different parameters. 

\
In this case, we use `multiplier` to generate two new functions, `double` and `triple`, which multiply their arguments by 2 and 3, respectively.

\
 ![](https://cdn.hackernoon.com/images/ZooZQzFE7INYxlbDjBNNxqTpP8g2-yqa3k3f.jpeg)

A common code ==interview== question related to closures. Consider the following code snippet:

```javascript
for (var i = 0; i < 3; i++) {
  setTimeout(function log() {
    console.log(i); // What is logged?
  }, 1000);
}
```

\
At first glance, this code appears to be a simple loop that logs the value of the loop index variable `i` after a 1-second delay. However, upon running the code, the unexpected output is the value 3 being logged three times. This outcome can be attributed to the principle of closures in JavaScript.

\
In this case, the `setTimeout()` function creates a closure by accessing the variable `i` in the outer function's scope. 

\
Since `setTimeout()` is an asynchronous function, the loop will continue to iterate and increment `i` to the value of 3 before any of the callbacks are executed, and since `i` is a `var` which is function scoped, the output shows 3 all three times.

\
The solution to this issue is to create a new scope for each closure by wrapping the inner function in an immediately invoked function expression (IIFE), passing in the enclosed variable as a parameter or using `let` instead of `var` as `let` has a block scope. 

\
This ensures that each closure has its own copy of the variable and is not affected by changes made in other closures.

\
Let’s take a look at the IIFE solution:

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

\
In this case, the output of the code would be:

`0 1 2`

\
By creating a new scope for each closure, this code logs the expected sequence of `0`, `1`, and `2`. This demonstrates the importance of understanding closures and how they interact with variable scope in JavaScript.

 ![](https://cdn.hackernoon.com/images/ZooZQzFE7INYxlbDjBNNxqTpP8g2-7cb3kgp.jpeg)

With ES6, the simpler solution is to use `let` . Here is what the code will look like:

```javascript
for (let i = 0; i < 3; i++) {
  setTimeout(function log() {
    console.log(i); // What is logged?
  }, 1000);
}
```

\
In this case, the output of the code would be:

`0 1 2`

\
Each iteration of the loop has its own scoped variable `i`, which is captured correctly by the closure.

\
In conclusion, you likely have already utilized closures in your code without realizing it. However, understanding this aspect of JavaScript is beneficial as you now know how it works and can make the best use of it. 

\
If you have understood the discussion so far, you should feel confident in your capacity to discuss closures when asked about them during your next interview.

\
Happy Coding! 😄

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

Closures Demystified: Unlocking Hidden Potential in Your JavaScript Code

Too Long; Didn't Read

@kirmani

RELATED STORIES