Javascript: How Closures Work

In Javascript, a closure is essentially a function along with the lexical environment within which it was declared. Lexical environment simply refers to the scope or context in which a function is declared, including all the variables that were in scope at that point.

Understanding JavaScript closures can be a bit tricky, but let’s start by clarifying some concepts:

• Functions: In JavaScript, functions are treated as first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

• Variables: Variables in JavaScript can be declared using var, let, or const. They hold data that can be manipulated or accessed within a program.

Now, let’s dive into closures:

Related: You may also be interested in reading my “Call Functions in JavaScript” article that covers more details on calling functions.

Example: JavaScript Closure

In JavaScript, each function holds a link to the environment where it was defined, known as its lexical environment. This link plays a crucial role in setting up the environment when the function is called. It allows the function to access variables declared outside of it, no matter where or when the function is invoked.

When a function is called by another function, and that function is called by yet another function, a series of connections to outer lexical environments is formed. This sequence of connections is referred to as the scope chain.

function outerFunction() {
  let outerVariable = 'I am from outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // Output: I am from outer function

In this example:

1. outerFunction declares a variable outerVariable and defines an inner function innerFunction.
2. innerFunction has access to outerVariable, even though it’s declared in the outer function.
3. outerFunction returns innerFunction.
4. When closureExample() is called outside of outerFunction, it still has access to outerVariable.

Why are Closures Useful?

Here’s a couple reasons that closures can be useful when writing Javascript code:

• Encapsulation: Closures allow you to encapsulate variables within a function’s scope, preventing them from polluting the global namespace.

• Data Privacy: Since the variables within a closure are not accessible from outside, closures can be used to create private variables and methods.

• Function Factories: Closures enable the creation of functions that can generate other functions with customized behavior.

Conclusion

Closures in JavaScript provide a way to maintain access to the lexical scope of a function even after the function has finished executing. Understanding closures is crucial for mastering advanced JavaScript concepts like asynchronous programming, functional programming, and design patterns. With practice and experimentation, you’ll become more comfortable with closures and leverage their power within JavaScript code.