Skip to content 
Understanding the nature of JavaScript closures is an accomplishment that fundamentally alters how you write and think about code. While closures may appear as some sort of mysterious entity, they really are just functions that “remember” their environment of origin.
You’ve likely utilized closures before without being aware of doing so. For example, whenever you write a function inside of another function and either return the inner function or send the inner function elsewhere, you’re creating a closure. The inner function holds onto the variables of its surrounding environment, even after the surrounding function has completed execution.
While the concept of closures might seem abstract if you’re new to JavaScript closures, once you fully comprehend the fundamental principles of scope and how functions are able to retain access to their originating environment; closures become a valuable asset. Below we’ll cover 5 key points that will help remove the mystique of closures and demonstrate how to utilize them effectively.
1. Lexical Scope: The Basis of JavaScript Closures
To be able to fully appreciate JavaScript closures, you first must understand what is meant by lexical scope. Lexical scope refers to the fact that a function’s ability to access variables is determined by where the function was originally defined within your source code, not by where the function was called.
Any function defined inside of another function can see the entire scope of the parent function. There isn’t anything magical happening here. What’s occurring is due to how JavaScript establishes a scope chain. The scope of the inner function consists of both its local variables along with the variables accessible from every outer function plus global variables.
The above mentioned scope chain is static and is established upon initial construction of the code, rather than during run time. Due to this property, it is termed lexical (or related to the structure of the text). If you grasp the idea of lexical scope, then you’ll be well on your way to becoming proficient in utilizing JavaScript closures.
As a simple example of this concept: when defining a variable inside of an outer function, any inner function defined inside of the outer function will always be able to access that variable regardless of whether or when/where the inner function is executed subsequently.
2. What Is a Closure?: A Function Remembering Its Origin
A closure is formed when a function maintains access to its lexical scope even after its outer function has returned. Stated more simply, a closure is a function that keeps track of the variables associated with the location of its birth.
When you return an inner function from an outer function, that returned function retains a “backpack” containing variables from its original outer scope. These variables do not get garbage collected since the inner function continues to reference them. This is essentially what defines JavaScript closures.
Closures aren’t a unique syntax nor a different feature. Rather, they exist naturally due to how JavaScript addresses function scopes and references. Although every single function in JavaScript is technically a closure, the term typically applies when a function is returned from another function and then called elsewhere.
The tangible impact of closures can be very substantial. By establishing such functionality, you can develop functions having enduring, unmodifiable “private” states inaccessible to other portions of your code.
3. Private Variables and Encapsulation Using JavaScript Closures
Another very applicable application of JavaScript closures are in developing “private” variables. Prior to ES6’s introduction of classes supporting private members, closures were primarily employed for achieving encapsulation.
You can establish a function returning an object with methods. These methods are closures that can access the same private variables as each other. Any external code cannot directly address these variables only the returned methods can.
This particular technique is referred to as the module pattern. Although this style of coding has been supplanted by using classes, it remains a viable option in several situations particularly where you require a straightforward method for bundling data with behavior without actually developing a full class.
Utilizing closures for protecting your internal state from unintentional or malevolent manipulation enhances the readability and modularity of your codebase since external users can only modify the provided data via the returned methods.
Below is an illustration of this principle: an example of a counter function providing increment and decrement methods accessing a private count variable:
4. Loops and Closures: A Trap to Fall Into
An additional common mistake with JavaScript closures arise when creating closures inside loops. Essentially, the problem arises when you create a function inside a loop that captures a loop variable (i.e., i), etc. As a result, all created functions end up referencing the final value assigned to i after the loop terminates.
This occurs because the loop variable i is referenced by each function (with var) or block (with let). With var, there is only one instance of i shared among all iterations. Using let instead, each iteration receives its own binding which resolves this dilemma.
There are two solutions for avoiding this issue:
• Always use let instead of var for loop counters.
• Utilize an Immediately Invoked Function Expression (IIFE) to capture the current iteration values.
By understanding why this situation develops, you’ll also gain insight into preventing it and composing predictable closures in loops.
5. Real World Applications for JavaScript Closures
Although beyond data encapsulation, JavaScript closures have numerous real-world applications. Closures are frequently applied in event listeners, callback functions, timer functions, and various functional programming idioms.
For example, when attaching a click listener within a loop and you need to preserve the current element being clicked; closures allow this preservation. When utilizing setTimeout() within a loop and needing to preserve the current index; closures (using let) provide this capability.
Closures are also at the core of implementing function factories. You can implement a factory producing functions parameterized on specific settings. Each produced function remembers its specific configurations.
With modern JavaScript, closures are heavily employed throughout React Hooks including useState(), useEffect(). Hook functions “close over” (retain access) to their originating components’ state & props until rendering occurs again.
Understanding JavaScript closures provides significant benefits in reading/writing library code debugging asynchronous operations designing more modular APIs. This is definitely not an esoteric topic, it is an everyday tool.
Combining Everything Together
Together these 5 principles encompass everything you need to know regarding JavaScript closures. First off, write some simple test cases to illustrate closures. Develop a function that generates another function. See how the inner function recalls variables from its original environment. Next build a counter using private variables. Try utilizing closures in loops and setTimeout() to observe how closures behave in context.
The more experience you acquire working with closures, the less unnatural they will begin to feel. You’ll start recognizing places where employing closures can assist you achieve encapsulation and/or configure elements.
JavaScript Closures Essential Cheat Sheet
Here’s a fast reference list designed to serve as guidance while practicing JavaScript closures.
- Firstly, learn lexical scope. A function can reference variables wherever it was defined not wherever it is invoked.
- A closure is merely a function retaining access to its outer variables. It takes its environment with it.
- Employ closures to protect your internal state from unauthorized or unintentional modifications. Produce methods enabling authorized usage of private variables.
- Be cautious when looping with var. Employ let or an IIFE to capture the proper values.
- Closures are ubiquitous, find them in event listeners, callback functions, timers and React hooks.
- Keep in mind that as long as a closure exists it will maintain access to variables preventing garbage collection.
- Avoid excessive generation of closures in performance critical loops. Every closure incurs some minor memory costs.
- Test your knowledge. Create simple tests illustrating behaviors and predict outputs.
Additional resources covering more advanced topics in these areas include: JavaScript.info’s guide to closures offers clear explanations and interactive examples. Another excellent resource is MDN’s documentation on closures, which covers the technical details thoroughly.
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS
[INSERT_ELEMENTOR id=”122″]
