Closures in JS

A closure in JavaScript is a function that has access to its outer (enclosing) function's variables and parameters even after the outer function has returned. In other words, a closure "closes over" its outer function's variables, preserving their values even after the outer function has executed. This allows the closure to "remember" the values of its outer function's variables even if they are no longer in scope.

Here's a simple example:

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

var closure = outerFunction(10);
console.log(closure(5)); // 15

In this example, outerFunction returns innerFunction, which has access to x even though outerFunction has already returned. When we call closure(5), it returns 15, which is the sum of x (10) and y (5).

Here's an example where you might need a closure to solve a problem:

Imagine you are creating a website with a list of items that can be expanded and contracted by clicking on a button. When the user clicks the button, you want to toggle the visibility of the item's details. Here's how you might implement this using a closure:

// This function creates a closure that remembers the visibility status of an item
function createToggler(itemId) {
  let isVisible = false;

  return function toggle() {
    isVisible = !isVisible;
    document.getElementById(itemId).style.display = isVisible ? 'block' : 'none';
  };
}

// Create a toggler for each item
let toggler1 = createToggler("item1");
let toggler2 = createToggler("item2");

// Attach the togglers to buttons
document.getElementById("button1").addEventListener("click", toggler1);
document.getElementById("button2").addEventListener("click", toggler2);

In this example, the createToggler function returns a closure that remembers the visibility status of an item. When the user clicks a button, the appropriate toggler is executed, updating the visibility status and modifying the display style of the corresponding item.

Without closures, it would be difficult to remember the visibility status of each item without creating global variables or adding properties to each button, which would create a lot of unnecessary complexity. But by using a closure, you can encapsulate the visibility status within a single function, making it easier to manage and maintain.

Here are some use of clousres.

1. Memory Management: Closures allow you to manage the lifetime of your variables and make sure they are not unnecessarily kept in memory.

2. Encapsulation: Closures allow you to encapsulate variables and functions within a single scope, making it easier to control access and prevent naming collisions.

3. State Management: Closures allow you to preserve the state of a function even after it has returned, which is particularly useful for implementing stateful objects and objects that need to persist data between function calls.

4. Asynchronous Operations: Closures are frequently used in asynchronous programming to preserve the state of a function and its variables between callbacks.

5. Partial Application: Closures allow you to partially apply functions, meaning that you can create a new function with some of its arguments already pre-filled.

6. Callback Functions: Closures are often used as callback functions, allowing you to pass a function as an argument to another function and have it executed at a later time.

7. Dynamic Scoping: Closures allow you to dynamically scope variables, meaning that you can create a new scope for a function at runtime.

8. Modules: Closures can be used to implement modular programming, allowing you to define a set of related functions and variables within a single scope.

9. Function Factories: Closures can be used to create function factories, which are functions that create and return other functions with specific characteristics.

10. Memoization: Closures can be used to implement memoization, which is a technique for caching the results of a function call and reusing them when the function is called again with the same arguments, improving performance.

Thanks for reading. Subscribe my news shelter for know more about JS in simple terms.