jsb

13/16 lessons81%

JavaScript Closures

Closures are one of the most powerful and foundational concepts in JavaScript. They are a way for functions to "remember" their lexical scope, even when executed outside that scope. In this lesson, we’ll demystify closures with examples and show why they’re crucial in functional programming.

Closures

A closure is created when a function captures variables from its surrounding scope. This captured environment is preserved even after the outer function has finished executing.

Key Characteristics of Closures:

  1. 1
    Functions retain access to their outer scope variables.
  2. 2
    The closure persists even if the outer function is no longer active.
  3. 3
    Useful for data encapsulation, state management, and higher-order functions.

A Basic Example

javascript
1
2
3
4
5
6
7
8
9
          function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer Variable: ${outerVariable}`);
    console.log(`Inner Variable: ${innerVariable}`);
  };
}

const closureExample = outerFunction("outside");
closureExample("inside");

Here, innerFunction retains access to outerVariable, even after outerFunction has completed execution.

Closures Importance

Closures allow you to:

  • Create Private Variables: Encapsulate data that isn’t directly accessible from the global scope.
  • Build Factory Functions: Generate functions with pre-configured behavior.
  • Implement Partial Application and Currying: Simplify function calls by pre-setting arguments.

Data Encapsulation with Closures

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          function counter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count,
  };
}

const myCounter = counter();
console.log(myCounter.increment()); // 1
console.log(myCounter.increment()); // 2
console.log(myCounter.decrement()); // 1
console.log(myCounter.getCount());  // 1

Here, the count variable is private to the counter function. The closure ensures that only the returned methods can access and modify it.

Function Factories

Closures can generate functions with pre-configured behavior.

javascript
1
2
3
4
5
6
7
8
9
10
11
          function multiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Each function (double, triple) remembers its factor value, thanks to closures.

Event Listeners and Closures

Closures are often used in event listeners to retain state.

javascript
1
2
3
4
5
6
7
8
9
10
11
          function attachHandler(element, message) {
  element.addEventListener("click", () => {
    console.log(message);
  });
}

const button = document.createElement("button");
button.textContent = "Click me!";
document.body.appendChild(button);

attachHandler(button, "Button was clicked!");

When the button is clicked, the closure ensures that the message variable is remembered.

Closures and Loops

Closures inside loops can lead to unexpected behavior if not handled properly.

Problem:

javascript
1
2
3
4
5
6
          for (var i = 1; i <= 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// Output: 4, 4, 4 (all closures share the same `i` reference)

Solution:

Use let to create block-scoped variables:

javascript
1
2
3
4
5
6
          for (let i = 1; i <= 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// Output: 1, 2, 3

Alternatively, create an IIFE (Immediately Invoked Function Expression):

javascript
1
2
3
4
5
6
7
8
          for (var i = 1; i <= 3; i++) {
  (function (j) {
    setTimeout(() => {
      console.log(j);
    }, 1000);
  })(i);
}
// Output: 1, 2, 3

Applications of Closures

  1. 1
    Memoization: Optimize functions by caching results.
  2. 2
    Partial Application: Pre-configure function arguments.
  3. 3
    State Management: Store and manage data in a functional way.

Conclusion

  • Closures are created when a function captures variables from its parent scope.
  • They enable data encapsulation and persistent state.
  • Practical applications include factory functions, event listeners, and memoization.