Hey there! Are you familiar with the concept of closures? If you’re new to programming or just starting to learn JavaScript, don’t worry—I’ll explain everything you need to know in this post.
But if you’re already comfortable with closures, you’ll want to stick around for the really cool stuff. We’ll explore the top 6 advantages of closures in JavaScript, including encapsulation, currying, memoization, and more.
Closures are incredibly useful for writing efficient JS code, and I’m excited to share all of their potentials with you!
First, let’s take a look at what closures are.
Introduction to Closures
A closure is a function that has access to the variables and parameters of its outer function, even after the outer function has returned. This is possible because the inner function retains a reference to the scope of the outer function, even after the outer function has been executed.
In JavaScript, closures are created automatically when a function is defined within the scope of another function. Here’s an example:
function outerFunc() {
const outerVar = "I'm a variable in the outer function";
function innerFunc() {
console.log(outerVar);
}
return innerFunc;
}
const closure = outerFunc();
closure(); // "I'm a variable in the outer function"
In this code, we define a function called outerFunc that declares a variable outerVar and a function called innerFunc. innerFunc logs the value of outerVar to the console.
When we call outerFunc, it returns the innerFunc function. We store the returned function in a variable called closure. Then, we call closure, which prints out the value of outerVar.
Because innerFunc has access to the variables and functions in the scope of outerFunc, it can log the value of outerVar to the console even though outerVar is not directly accessible from outside of outerFunc.
In other words, closure is a function that keeps access to the variables and functions in the scope of outerFunc even after outerFunc has completed execution.
Now that we’ve introduced the concept of closures, let’s move on to the first advantage of using them in JavaScript.
1. Encapsulation
By encapsulating data and functionality within a closure, you can create self-contained units of code that are easy to understand and maintain. It can be particularly useful when working on large projects or when developing libraries or frameworks.
Here is an example of how to use a closure to create a simple book module in JavaScript:
function createBook(title, author) {
let _title = title;
let _author = author;
return {
getTitle: function() {
return _title;
},
getAuthor: function() {
return _author;
},
setTitle: function(newTitle) {
_title = newTitle;
},
setAuthor: function(newAuthor) {
_author = newAuthor;
}
}
}
const book1 = createBook('Clean Code', 'Robert Cecil Martin');
console.log(book1.getTitle()); // 'Clean Code'
console.log(book1.getAuthor()); // 'Robert Cecil Martin'
book1.setTitle('Code Complete');
console.log(book1.getTitle()); // 'Code Complete'
In this example, we have a createBook function that takes a title and an author as arguments and returns an object with four methods: getTitle, getAuthor, setTitle, and setAuthor. These methods allow us to retrieve or update the values of the _title and _author variables, which are private to the createBook function and not accessible outside of it.
By using closures, we are able to create a “book” object that has a clear and defined interface for interacting with the title and author properties, while still maintaining the encapsulation of those properties within the createBook function.
2. State Retention
Consider a function that generates a counter that increments by one each time it is called:
function createCounter() {
let count = 0;
return function() {
count += 1;
return count;
}
}
const counter1 = createCounter();
const counter2 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1
In this example, the createCounter function returns a function that increments and returns the value of the count variable each time it is called. Because the returned function is a closure, it keeps access to the count variable even after the createCounter function has returned, allowing it to maintain states across multiple function calls.
This state retention is made possible by the fact that closures keep access to the variables and functions defined in their parent scope, even after the parent function has returned. It allows you to create function factories and other patterns that rely on keeping states across several function calls, making closures a powerful and useful tool for organizing and optimizing your code.
3. Currying
Closures can also be used to create curried functions in JavaScript. Curried functions are functions that can be called with a partial set of arguments and then return a new function that expects the remaining arguments. They can be useful for creating more flexible and reusable code by allowing you to specify some of the arguments upfront and then call the function with the remaining arguments at a later time.
Here is an example of a curried function in JavaScript:
function createFormatter(prefix) {
return function(value) {
return prefix + value;
}
}
const formatCurrency = createFormatter('$');
const formatPercentage = createFormatter('%');
console.log(formatCurrency(123.45)); // $123.45
console.log(formatPercentage(0.1234)); // %0.1234
const price = 123.45;
console.log(`The price is ${formatCurrency(price)}`); // The price is $123.45
const percentage = 0.1234;
console.log(`The percentage is ${formatPercentage(percentage)}`); // The percentage is %0.1234
In this example, we have a createFormatter function that takes a single argument prefix and returns a new function that takes a single argument value. This returned function adds the prefix to the beginning of the value and returns the result.
We use the createFormatter function to create different formatter functions. Each of these functions expects a single argument and can be used to add a prefix to a value in a clean and efficient way.
In this code, we create the formatCurrency function to add a dollar sign to a price, and the formatPercentage function to add a percentage sign to a percentage value. These functions can then be used in various contexts, such as in string interpolation or as part of a larger expression.
Overall, closures allow you to specify a common prefix that can be used in multiple contexts without having to repeat it each time.
4. Memorization
Memorization is a technique that involves storing the results of expensive or time-consuming calculations in a cache or lookup table so that they can be quickly retrieved the next time the same calculation is needed. It can greatly improve the performance of a function or algorithm, especially if it is called multiple times with the same arguments.
Here is an example of how you might use closures to improve performance through memorization in JavaScript:
function createFibonacciGenerator() {
const cache = {};
return function fibonacci(n) {
if (n in cache) {
return cache[n];
} else {
let a = 0, b = 1, c;
for (let i = 0; i < n; i++) {
c = a + b;
a = b;
b = c;
}
cache[n] = a;
return a;
}
}
}
const fibonacciGenerator = createFibonacciGenerator();
console.log(fibonacciGenerator(10)); // 55
console.log(fibonacciGenerator(10)); // 55
In this example, we have a createFibonacciGenerator function that creates and returns a function for generating Fibonacci numbers. The generated function has a private cache object that stores previously calculated Fibonacci numbers.
When the generated function is called with a number n, it first checks to see if the result is already stored in the cache. If it is, it simply returns the cached result, which is much faster than recalculating it. If the result is not in the cache, the function calculates the Fibonacci number and stores it in the cache before returning it.
By using a closure, we are able to create a “memoized” version of the Fibonacci function that greatly improves its performance through the use of memorization. This is especially useful for expensive or time-consuming calculations that may be called multiple times with the same arguments.
5. Asynchronous Programming
Here is a code example that demonstrates how closures can simplify asynchronous programming in JavaScript:
function getData(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else if (xhr.readyState === 4) {
reject(xhr.status);
}
}
xhr.open('GET', url);
xhr.send();
});
}
getData('https://your-domain.com/api/users')
.then(users => console.log(users))
.catch(error => console.error(error));
In this example, we have a getData function that returns a new Promise that wraps an HTTP request to a given URL. The Promise is resolved with the response data from the server when the request is successful, or rejected with the HTTP status code when the request fails.
The onreadystatechange event handler of the XMLHttpRequest object is defined within the Promise’s executor function, which is a closure. This means that the event handler has access to the variables and functions defined in its parent scope, including the xhr object, the resolve and reject functions, and the url argument.
By using closures in this way, we can simplify the asynchronous programming process by encapsulating the logic for handling the response data within the Promise’s executor function, rather than having to define separate event handlers for each possible response. This makes our code easier to read and maintain, as we can define the logic for handling the response data right where it’s needed.
6. Event handling
Closures can also be useful for creating event handlers in JavaScript. Here is a code example that demonstrates the use of closures for event handling:
function createMenu(items) {
let currentItem = 0;
return {
next: function() {
currentItem = (currentItem + 1) % items.length;
return items[currentItem];
},
prev: function() {
currentItem = (currentItem - 1 + items.length) % items.length;
return items[currentItem];
},
handleKeydown: function(event) {
if (event.keyCode === 37) {
// left arrow key
console.log(this.prev());
} else if (event.keyCode === 39) {
// right arrow key
console.log(this.next());
}
}
}
}
const menu = createMenu(['Home', 'About', 'Contact']);
document.addEventListener('keydown', menu.handleKeydown.bind(menu));
In this example, we have a createMenu function that takes an array of menu items as an argument and returns an object with three methods: next, prev, and handleKeydown. The next and prev methods are used to navigate between the different menu items, while the handleKeydown method is an event handler that is called in response to a user pressing a key on the keyboard.
The handleKeydown event handler checks the key code of the pressed key and either calls the prev or next method to navigate to the previous or next menu item, depending on the key that was pressed. Because the returned object is a closure, it retains access to the currentItem and items variables even after the createMenu function has returned. This allows us to create multiple instances of the menu object, each with its own separate list of items and current item, without having to worry about conflicts or interference between the different instances.
The handleKeydown method can then be used as an event handler by adding it as a listener to the keydown event on the document object using the addEventListener method. We use the bind method to specify that the this value inside the event handler should refer to the menu object so that we can access the prev and next methods.
This code example demonstrates how closures can be used to create event handlers in JavaScript, allowing you to retain access to variables and functions defined in the parent scope and specify complex event-driven behavior in a clean and efficient way.
Advantages of Closures in JavaScript: Conclusion
I hope you enjoyed learning about the top 6 advantages of closures in JavaScript. Closures are such a useful feature of the language that can make your code more powerful, efficient, and flexible.
In case you missed any of the 6 benefits we covered in this post, here they are one more time:
- Encapsulation: Closures allow you to create private variables and functions that can only be accessed from within the closure. This can help you improve the structure and modularity of your code.
- State retention: Closures allow you to retain the state of a function even after it has finished running. This can be handy for creating function factories or other patterns that rely on maintaining state across multiple function calls.
- Currying: Closures can help you create curried functions, which are functions that can be called with a partial set of arguments and then return a new function that expects the remaining arguments. This can make your code more flexible and reusable, which is always a good thing!
- Memorization: Closures can be used to implement the memorization technique, which allows a function to remember and reuse its previous results. This can help you improve the performance of your code.
- Asynchronous programming: Closures can simplify asynchronous programming by allowing you to define and execute callback functions or async logic within the context of the asynchronous operation, rather than having to define them separately and pass them around as arguments.
- Event handling: Closures can be used to create event handlers that have access to variables and functions defined in their parent scope. This can be really helpful for implementing complex event-driven behavior in your code.
I hope you found this post helpful! If you’re interested in learning more about JavaScript and its ecosystem, you might also want to check out my blog post on whether TypeScript is faster than JavaScript. Happy coding!