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! 😄

What is Type Coercion and Type Casting in JavaScript?

Closures Demystified: Unlocking Hidden Potential in Your JavaScript Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Must-Know JavaScript Object Secrets Every developer Needs!

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 Must-Know JavaScript Object Secrets Every developer Needs!

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps