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 ( ), including all the variables and parameters of the functions that enclose it. Lexical scope 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: function outerFunction(x) {
  function innerFunction(y) {
    return x + y;
  }
  return innerFunction;
}

let newFunction = outerFunction(2);
console.log(newFunction(3)); // Output: 5 In this example, returns , which has access to even after has returned. When is called with the parameter , it adds (which is equal to ) to (which is equal to ) and returns the sum, which is . outerFunction innerFunction x outerFunction newFunction 3 x 2 y 3 5 This is possible because of the closure created by inside . innerFunction outerFunction Closures are often used in JavaScript to create and functions that are inaccessible from outside the function, as well as to create that can generate new functions with different parameters. private variables factory functions Creating Private Variables and Functions: function counter() {
  let count = 0;
  function increment() {
    count++;console.log(count);
  }
  return increment;
}

let incrementCounter = counter();
incrementCounter(); // Output: 1incrementCounter(); // Output: 2 In this example, returns , which has access to even after has returned. This allows to increment each time it is called, effectively creating a counter that is inaccessible from outside the function. counter increment count counter increment count private Generating Factory Functions: 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, returns , which has access to even after has returned. This allows to multiply by any that is passed to it, effectively creating a that can generate new functions with different parameters. multiplier inner x multiplier inner x y factory function In this case, we use to generate two new functions, and , which multiply their arguments by 2 and 3, respectively. multiplier double triple A common code question related to closures. Consider the following code snippet: interview 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 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. i In this case, the function creates a closure by accessing the variable in the outer function's scope. setTimeout() i Since is an asynchronous function, the loop will continue to iterate and increment to the value of 3 before any of the callbacks are executed, and since is a which is function scoped, the output shows 3 all three times. setTimeout() i i var 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 instead of as has a block scope. let var let 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: 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 , , and . This demonstrates the importance of understanding closures and how they interact with variable scope in JavaScript. 0 1 2 With ES6, the simpler solution is to use . Here is what the code will look like: let 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 , which is captured correctly by the closure. i 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! 😄

Get IT services from professionals

Read My Stories

Get in touch

What is Type Coercion and Type Casting in JavaScript?

Demystifying Hoisting for Javascript Developers 

Achieving Excellence With Less Stress: A Simple Guide to Success

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Closures Demystified: Unlocking Hidden Potential in Your JavaScript Code

Too Long; Didn't Read

Kirmani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Closures Demystified: Unlocking Hidden Potential in Your JavaScript Code

Too Long; Didn't Read

Kirmani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES