Closures in JavaScript: Concepts, Mechanisms and Best Practices

One of the more nuanced and powerful features in JavaScript is closures. Understanding closures can significantly enhance your coding practices and problem-solving skills in JavaScript. Let’s dive into what closures are, how they work, and best practices for using them, along with illustrative examples

What Are Closures?

A closure is a function that remembers its outer variables and can access them. In JavaScript, unlike the other languages, every function creates a closure, including the function’s scope (the variables it has access to) and the lexical environment (where it was declared).

function outerFunction(externalVariable) {
    return function innerFunction() {
        console.log(externalVariable);
    }
}
const newFunction = outerFunction("Hello World");
newFunction(); // Outputs: Hello World

How Closures Work

To understand closures, we need to grasp two key concepts: lexical scoping and execution context.

Lexical Scoping: JavaScript functions are lexically bound, meaning they are executed using the scope chain that was in effect when they were defined. This is contrary to dynamic scoping, where the scope chain is determined at the time of execution.
Execution Context: When a function runs, an execution context is created. This context contains the function’s local variables, and it keeps a reference to its outer lexical environment.

When a function (in the example above innerFunction) is defined inside another function (outerFunction), innerFunction has access to the variables of outerFunction. This is possible because innerFunction‘s lexical environment includes the scope of outerFunction.

Behind the Scenes of Closures in JavaScript

Understanding how closures work behind the scenes requires diving into how the javascript handle function scopes and environments.

1. Function Creation and Execution Context

Every time a function is defined, JavaScript creates a function object and a scope chain associated with it.
This scope chain contains the function’s own scope, and it links to the outer scope where the function was defined.

2. Lexical Scoping

JavaScript uses lexical scoping, meaning a function’s scope is defined by its physical location in the code.
When a function is created, it carries with it references to the variables that are present in its lexical environment.

3. The Role of the Closure

A closure is formed when an inner function is made accessible outside of its lexical scope.
The inner function maintains a reference to its outer scope, preserving the variables and state of that scope.
This is possible because JavaScript functions are first-class objects, which means they can be returned by other functions, passed as arguments, or stored in variables.

4. Persistent Lexical Scope Reference

When the outer function completes its execution, normally, the local variables within it are no longer accessible.
In the case of closures, the inner function still references the scope of the outer function.
The JavaScript engine recognizes that there’s a closure and keeps the outer function’s variables in memory, making them accessible to the inner function.

5. Garbage Collection and Memory Management

These preserved variables exist until the closure is no longer in use or accessible.
The garbage collector will eventually reclaim memory if there are no more references to the closure, preventing memory leaks.

Examples

Example 1: Closure with Traditional Function Declaration

In traditional function declarations, this refers to the context in which the function is called (or the global object if the function is called without context).

function OuterFunction() {
    this.outerValue = 'Outer';
    this.getOuterValue = function() {
        return function() {
            return this.outerValue; // 'this' refers to global or undefined in strict mode
        };
    };
}

var outer = new OuterFunction();
var innerFunction = outer.getOuterValue();
console.log(innerFunction()); // Output: undefined (in strict mode) or global 'outerValue' if defined

In this example, the inner function does not have access to this of OuterFunction because in traditional functions, this is determined by how the function is called, not where it’s defined.

Example 2: Closure with Arrow Function

Arrow functions do not have their own this context; instead, they inherit this from the surrounding lexical context.

function OuterFunction() {
    this.outerValue = 'Outer';
    this.getOuterValue = function() {
        return () => this.outerValue; // 'this' is lexically bound to OuterFunction
    };
}

var outer = new OuterFunction();
var innerFunction = outer.getOuterValue();
console.log(innerFunction()); // Output: 'Outer'

Here, the arrow function inside getOuterValue method correctly accesses this.outerValue from OuterFunction because arrow functions use the this value from their lexical scope. This makes arrow functions a great choice when working with closures in object methods or constructors where you want to access the parent object’s properties.

Best Practices

Memory Efficiency: Be aware of memory leaks. Closures can lead to increased memory usage if not used judiciously, as variables referenced by closures won’t be garbage collected.
Encapsulation: Use closures to create private variables and functions. This is a powerful way to encapsulate functionality and expose only what is necessary.
Event Handlers: Closures are useful in event handling within loops. They ensure that the event handler has access to the correct iteration variable.

Conclusion

Closures are a fundamental and powerful feature in JavaScript, offering both functional and expressive ways to write code. They allow for efficient data handling and encapsulation, making your JavaScript applications more robust and maintainable. By following best practices and understanding the underlying mechanics, you can harness the full potential of closures in your JavaScript coding endeavors.