A closure is a powerful concept in JavaScript that enables an inner function to remember and access the variables of its outer function, even after the outer function has finished executing. In simpler terms, a closure allows a function to retain access to variables from its parent scope even after the parent function has returned.

🎬Behind🎬 the scenes:

Closures in JavaScript work by creating a special relationship between a function and the variables in its outer lexical environment (also called the closure's environment). The lexical environment is essentially the set of variables, functions, and other objects that are in scope for a particular function at the time it is defined.

When a function is defined, it creates a closure over its lexical environment, which means that the function has access to the variables and other objects in its lexical environment, even after the outer function has finished executing. This is what allows inner functions to "remember" the variables of outer functions.

Here's an 💻example💻 that demonstrates how closures work:

function outer() {
  let name = "JavaScript";
  return function inner() {
    console.log(name);
  };
}

const printName = outer();
printName();

In the above code, the outer() function returns a reference to the inner() function, which is assigned to the variable printName. When printName() is called, it logs the value of the variable name that was defined in the outer() function.

Behind the scenes, when a function is defined that contains a reference to a variable outside of its own scope, the JavaScript engine creates a closure that contains a reference to the variable, as well as a reference to the function itself. This closure is essentially an object that "closes over" the variable, keeping it alive and accessible to the inner function.

🚀Application of closures:

🔒Private variables

Closures are a powerful feature of JavaScript that enable developers to create private variables within functions. Private variables are variables that cannot be accessed or modified from outside the function, which can be useful for creating more secure and encapsulated code.

Here's an 💻example💻 of how closures can be used to create private variables:

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

const counter = createCounter();
count = count + 1 // throws Uncaught ReferenceError: count is not defined
counter.increment(); // logs 1
counter.increment(); // logs 2
counter.decrement(); // logs 1

In this 💻example💻, the createCounter() function creates a private variable count and returns an object with two methods, increment() and decrement(), that modify the value of count. Because count is defined inside the createCounter() function and not returned directly, it remains private and cannot be accessed from outside the object.

The 🔑key to this pattern is the use of closures to "close over" the private variable count. When the increment() and decrement() functions are defined inside createCounter(), they have access to the count variable because they are defined in the same scope. When the createCounter() function returns the object with these methods, they still have access to the count variable even though they are now defined outside the original scope of createCounter().

This pattern of using closures to create private variables can be applied in many different ways, and is a powerful tool for writing clean and maintainable code. By creating private variables with closures, you can limit the scope of your variables and functions, reducing the risk of conflicts or unexpected behavior caused by external code modifying your variables.

📈State management

Closures are a powerful feature of JavaScript that enable developers to manage state within functions. State is any data that changes over time, and can be anything from a simple counter to a complex object that tracks the state of an entire application.

Here's an 💻example💻 of how closures can be used to manage state:

function createState() {
  let state = 0;

  function getState() {
    return state;
  }

  function setState(newValue) {
    state = newValue;
  }

  function increment() {
    state++;
    console.log(state);
  }

  function decrement() {
    state--;
    console.log(state);
  }

  return {
    getState: getState,
    setState: setState,
    increment: increment,
    decrement: decrement
  };
}

const myState = createState();
myState.increment(); // logs 1
myState.increment(); // logs 2
myState.decrement(); // logs 1
myState.setState(5);
console.log(myState.getState()); // logs 5

In this 💻example💻, the createState() function creates a private variable state and returns an object with four methods, getState(), setState(), increment(), and decrement(). The getState() and setState() methods allow external code to access and modify the value of state, while the increment() and decrement() methods modify state directly.

Because state is defined inside the createState() function and not returned directly, it remains private and cannot be accessed from outside the object. The increment() and decrement() methods modify state directly, while the getState() and setState() methods provide a way to access and modify state indirectly.

This pattern of using closures to manage state is a powerful tool for writing complex applications with many different components and variables that need to interact with each other. By creating private variables with closures and providing public methods to access and modify them, you can create a modular and maintainable codebase that is easy to reason about and debug.

In summary, closures can be used for state management by creating private variables within functions and providing public methods to access and modify them. This pattern can be applied in many different ways, from simple counters to complex objects that track the state of an entire application.

Connect with me on my:

LinkedIn
GitHub
Twitter