window object. Because of the nature of web pages, many scripts from differnt sources can (and will) run on the same page sharing a common global scope and this can be a really really bad thing as it can lead to name collisions (variables with the same names being overwritten) and security issues.
So what is a closure? Well, I could have used the definition given by Wikipedia, but after reading it myself I think we need a simpler, more practical explanation for web developers.
In the code above you can see that
makeFunction returns an anonymous function, and this function still has access to
Closures together with anonymous functions can be used to achieve effective private scopes. If you have used any AJAX before you will have probably seen anonymous functions. This are functions that don’t have a name and are often used as callbacks passed as arguments when invoking a function that performs an asynchronous task. Something like:
But anonymous functions can also serve a different purpose: creating scope. All variables declared inside a function are only visible inside that function and hidden from code outside. If we only want to create scope we don’t really need to give the function a name, we only need to execute the function once so we can just use the invokation operator on the anonymous function itself.
() is the invokation operator. This syntax is a bit weird, so to make it easier to read you will normally see it like this:
Wrapping the function in parens makes it easier to see that something funny is going on with that function. The function is basically executing itself right after being declared and since it is anonymous and hasn’t been assigned to any variable it can not be referenced, effectively creating a private scope.
This comes in very handy and is commonly used to wrap whole scripts, putting all your code in a closure and then publishing a public interface on the
In the example above variable
a is completely private, whereas
foo has been published on the
window object under the name
myPlugin, so from outside this code
foo can be called using
window.myPlugin() or just
window is the global object. This is known as the module pattern and it is very nicely explained by Ben Cherry in this post.
This is also very common when writing jQuery plugins. For example, if we wanted to write a plugin that simply adds a class to the selected nodes (this is a bit silly but should do for the example) we can write something like this:
Note that we are passing
jQuery to the anonymous function as a parameter and that parameter is given the name of
$ inside it’s own local scope.
So now after you have loaded jQuery and your plugin on the page you can add the class name
just-a-classname to all links by doing this:
I hope that if you read this far you found this post useful. Please leave a comment and share your thoughts.