OZY WU-LI

Preface

Closures sound scary. In fact they really are scary if you’re new to JavaScript or even programming in general. Closures certainly scared me when I first learned about them. But after reading and fiddling with them a bunch, I eventually got the hang out of understanding closures. It also helps that closures are not some obscure concept. You’ll run into them often in the wild. Eventually, closures become not such a scary thing anymore. They become a familiar concept that’s actually not too difficult to understand.

I’m writing this article because to further solidify my own understanding of closures. The saying goes that if you can’t explain something in your own words, then you don’t actually understand it yourself. I also hope that this article will serve as a reference for myself in the future in case I forget what the heck closures are. Because though they aren’t the most complicated concept in the world, closures are definitely not intuitive (at least for me).

If anyone ends up reading this article and finds some value in it, that’d be awesome as well.


Introduction

In short, a closure is an inner function that has access to the scope of the outer function. This sounds simple or like gibberish depending on your exposure to JavaScript. Either way, let’s break it down for newbies or at least for the sake of my future, dumber self.

What do we mean by “scope”? Scope refers to the accessibility of variables in your code. In JavaScript, there are two scopes: global and local.

Example of global scope:

See the Pen closures global by ozywuli (@ozywuli) on CodePen.

Example of local scope:

See the Pen closures local by ozywuli (@ozywuli) on CodePen.

In effect, anytime a function is executed, any local variables will be deleted and will no longer accessible. But there’s an exception… closures!

Let’s examine this statement again: “a closure is an inner function that has access to the scope of the outer function”. When a function executes, it creates a local scope that’s inaccessible to code outside of the function. But any inner functions that execute within that parent function has the same access to that parent function’s local scope. Let’s look at an example for further clarification:

See the Pen closures outer and inner functions by ozywuli (@ozywuli) on CodePen.

What happened in the above example? The closure created a snapshot of the outer functions scope when the outer function executed. So when the outer function did execute, its local scope closed over (hence the name closure) the local scope of the inner function, giving the inner function access to the outer function’s scope.


Closure Snapshot

After the outer function has returned, the variables in the scope of the outer function are still accessible in a closure. When a closure is created, what happens is that your code takes a snapshot of the outer function’s scope, and this snapshot can be referenced in future code executions. For example:

See the Pen closure snapshot by ozywuli (@ozywuli) on CodePen.


Closures in the wild

Let’s look at some examples of closures you may encounter in real-world production code.

Prevent alias conflicts between multiple JS libraries

If you’re using JS libraries that share an alias, such as $ in jQuery and mooTools, you can use an immediately-invoked function expression (IIFE) to create a new scope for an alias without fear of conflicts from other JS libraries.

(function($) {
    // $ now refers to jQuery inside the scope created by the IIFE
})(jQuery)

Store local variables in jQuery click events

See the Pen closures in jquery by ozywuli (@ozywuli) on CodePen.

Create private methods

You would want to create private methods to restrict access to code like preventing users of your plugin or library from accidentally executing code that’s not meant to be public.

See the Pen closure private methods by ozywuli (@ozywuli) on CodePen.


Conclusion

If you have any feedback for how to improve this article, I’d be glad to know them.


References

>