Over the past year, I’ve been deeply immersed in developing a web application project. About seven months ago, as the complexity of the project grew, I made the switch to object-oriented JavaScript. This shift was transformative, drastically improving my productivity in ways that are hard to describe—you truly have to experience it to understand its impact.
Discovering the Power of Closures
As I delved into object-oriented JavaScript, I encountered several advanced concepts that I hadn’t previously needed or explored. One of the most significant among these was closures. While I wouldn’t yet consider myself an expert in JavaScript or its closures, I’ve gained valuable insights that I’d like to share.
In JavaScript, a closure is a function that “remembers” the environment in which it was created, even after that environment no longer exists. This means that a closure can retain access to variables from its surrounding scope, even after the outer function has finished executing.
When Do Closures Become Useful?
Closures become particularly useful when working with jQuery in conjunction with object-oriented JavaScript. Here’s an example to illustrate:
$('li').each(function() {
$(this).html(this.counter);
});
At first glance, this code might seem correct, but it doesn’t work as expected. The issue arises because the this keyword inside the each() function refers to the current $('li') element, not to the object that contains the counter property.
The Solution: Using Closures
A common but flawed solution might be:
$(this).html(obj.counter);
However, this approach assumes that the object is always named obj, which violates the principles of object-oriented programming. Moreover, it makes it impossible to create and use multiple instances of the class within the same document. While a workaround could involve using separate documents and displaying them within iframe elements, this is hardly a professional or scalable solution.
Here’s where JavaScript closures come to the rescue. By using a closure, we can pass the correct reference to the object (this) into the each() function in jQuery. This ensures that the code behaves as expected, even with multiple instances of the class:
const self = this;
$('li').each(function() {
$(this).html(self.counter);
});
This approach preserves the object-oriented design while allowing for flexibility and scalability.
Modern Alternative: Arrow Functions
In modern JavaScript, arrow functions offer a more elegant solution. Arrow functions don’t have their own this context; instead, they inherit this from the surrounding lexical scope, which can simplify the code:
$('li').each(() => {
$(this).html(this.counter);
});
This approach removes the need for the self = this workaround and adheres to the principles of object-oriented programming.
A Note on jQuery Functions
It’s worth mentioning that some jQuery functions, such as .bind(), allow you to pass arguments and explicitly set the this context. However, .bind() is typically used for attaching event handlers rather than iterating over elements like .each(). Arrow functions often provide a more straightforward solution in these scenarios.
Leave a Reply