🚀How JavaScript Works (Part 5)? Closure

Closures are a fundamental and powerful concept in JavaScript. They play a crucial role in creating maintainable and efficient code. Understanding closures is essential for every JavaScript developer. In this comprehensive guide, we will delve into the world of closures, from their origins to practical examples and best practices.

Introduction to Closure
Origin of Closures
Definition of Closure
What Closure Is
What Closure Is Not
Examples of Closure in JavaScript
Closed Over Variables
Best Practices for Using Closures
Conclusion
Sources

Introduction to Closure

Imagine you have a function in JavaScript that references variables outside its own scope. These variables may belong to a different function or even the global scope. When you use this function, it retains access to those external variables. This phenomenon is known as a closure. Closures allow you to create self-contained and reusable functions that can encapsulate data and behavior effectively.

Origin of Closures

The concept of closure is not unique to JavaScript. It has its roots in lambda calculus, a mathematical concept predating the creation of programming languages. Closures have been present in functional programming languages like Lisp for decades. However, their widespread adoption in more general-purpose languages, such as JavaScript, is relatively recent.

Definition of Closure

Defining closure from an academic perspective can be complex. Instead, let's focus on an operational definition that explains the practical use of closures in JavaScript:

Closure is when a function is able to remember and access its lexical scope, including the variables outside of itself, even when that function executes in a different scope.

This definition consists of two essential parts:

The ability of a function to access its lexical scope.
The preservation of this access even when the function executes in a different scope. These two components collectively form what we refer to as a closure.

What Closure Is

Closures allow JavaScript developers to create powerful and flexible code. Here are some key attributes of closures:

Encapsulation: Closures enable the encapsulation of data within functions, leading to cleaner and more organized code. Data Privacy: Closures protect variables from being directly accessed and modified from outside the function. This privacy enhances security and avoids unintended interference with data.
Controlled Access: Closures provide controlled access to variables by exposing only the necessary functions, preventing unauthorized changes to the data.
Reusability: Closures can create self-contained modules that are reusable across different parts of your codebase.
Callback Functions: Closures are fundamental in handling callback functions, such as event handlers and asynchronous operations.

What Closure Is Not

To understand closures fully, it's crucial to know what they are not:

Capturing Values: Closures do not capture specific values at a particular moment. Instead, they retain access to variables. This means the value of a variable is dynamic and can change over time.
Duplicates of Variables: Closures do not create copies of variables. They maintain a reference to the same variable, which can be modified directly.
Object-Oriented Encapsulation: While closures offer encapsulation, they do not provide class-based object-oriented encapsulation. JavaScript uses prototypes and classes for that purpose.

Examples of Closure in JavaScript

Let's explore practical examples of how closures are used in JavaScript:

Private Data with Closure

Closures can be used to create private data within objects:

function createPerson(name) {
  const privateName = name;

  return {
    getName: function () {
      return privateName;
    },
    setName: function (newName) {
      privateName = newName; // This would cause an error!
    },
  };
}

const person = createPerson("Alice");
console.log(person.getName()); // Output: "Alice"

In this example, the createPerson function returns an object representing a person. It contains two methods, getName and setName. The privateName variable is not directly accessible from outside the function. The closures within the returned object give us controlled access to the privateName variable while protecting it from direct modification outside the function. Attempting to modify privateName directly from outside the closure would result in an error.

Callback Functions

Closures are frequently used in callback functions, such as event handlers and asynchronous operations. Here's a simple example:

function fetchData(url) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // Here, the `url` variable is closed over by the arrow functions
      console.log(`Data fetched from ${url}:`, data);
    })
    .catch((error) => {
      console.error(`Error fetching data from ${url}:`, error);
    });
}

fetchData("https://api.example.com/data");

In this case, the arrow functions inside the then and catch methods of the promise close over the url variable. This allows us to access the url variable even though the callback functions are executed in a different context, such as when the fetch operation is complete.

Timers with Closure

A common use case for closure is when you set timers using setTimeout or setInterval. These functions involve callbacks that reference variables outside the function. Closure allows these callbacks to access the variables even when the outer function has finished execution.

function waitASec() {
  const question = "What is closure?";
  setTimeout(function () {
    console.log(question);
  }, 1000);
}

waitASec(); // Outputs: "What is closure?"

Looping with Closure

One classic example where developers often encounter issues related to closure is in loop structures. Consider this example with a for loop:

for (var i = 1; i <= 3; i++) {
  setTimeout(function () {
    console.log("i: " + i);
  }, 1000);
}

Surprisingly, this code logs "i: 4" three times. Why? Because there's only one variable i, and the closures preserve access to that single variable, resulting in the value 4.

To create separate variables for each iteration, you can use block-scoped variables with let or rely on JavaScript's automatic variable creation for each iteration (ES6).

Closed Over Variables

Understanding how closures handle variables is crucial. In JavaScript, a closure preserves a reference to the entire scope, not just individual variables. This means that even if you only reference one variable within a closure, the entire scope is retained. As a result, variables that you might not explicitly use can still consume memory. It's important to be aware of this when working with closures to avoid unintended memory leaks.

Best Practices for Using Closures

While closures are a powerful tool, they should be used with care. Here are some best practices for working with closures:

Keep Closures Simple: Avoid creating overly complex closures. They should be easy to understand and maintain.
Mind Memory Usage: Be mindful of memory usage, especially when closures reference large objects. Always release references when they're no longer needed.
Avoid Overuse: Not every function needs to be a closure. Use them when they genuinely offer advantages in terms of data encapsulation and controlled access.
Use Block Scoping: When appropriate, use let and block-scoped variables to avoid issues related to loop closures.

Conclusion

In this guide, we've explored the concept of closure in JavaScript, from its origins to practical applications. Closures empower developers to create self-contained functions, encapsulate data, and build reusable code modules. By understanding closures and their best practices, you can write cleaner, more secure, and more efficient JavaScript code. Closures are a powerful tool in the JavaScript developer's toolbox, and mastering them is essential for becoming a proficient JavaScript developer.

Sources

Kyle Simpson's "You Don't Know JS"
MDN Web Docs - The Mozilla Developer Network (MDN)

Blog