Using JavaScript closures to create private scopes

One of the best known problems in JavaScript is it’s dependance on a global scope, which basically means that any variables you declare outside of a function live in the same name space: the ominous 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.

To minimise the problem we can use JavaScript’s powerful closures to create private scopes where we can be sure our variables are invisible to other scripts on the page.

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 JavaScript when you declare a function, the body of the function has access to its parent scope and its own local (private) scope. Closure means that functions close over the variables around them, so that functions created inside of another function still have access to the scope in which they were created even after the parent function has returned. Consider this:

In the code above you can see that makeFunction returns an anonymous function, and this function still has access to foo.

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.

The last () 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 window object.

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 myPlugin() because 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.

Categories: Uncategorized
  • Well done, this actually explained private scoping clearly. I was confused as to the jQuery syntax and why it was done this way.

    • lupomontero

      Many thanks for the feedback! Glad to hear it helped someone?;-)

  • ?yvind Mo

    Clear explanation and good use of example. Thank you!

  • wheee

    Great, succinct explanation. Thanks!

  • anon

    “so to make it easier to read you will normally see it like this”

    This makes it sound like it’s a style choice to wrap the function in parens, but from my experiments it seems that you have to wrap it, or else it doesn’t work.

    • lupomontero

      You only need to wrap the function expression in cases where it could be confused with a function declaration.

      Check this out for code examples:

      Note that it is now more common (and recommended) to put the invocation operator () inside the wrapping parens.

  • Alexander Embiricos

    Thanks! Is there a way to get this to work with `’use strict’`?

    • lupomontero

      Hi Alexander, I don’t see why there would be a problem running in strict mode. Can you gist and example of what you are trying to do and the error/warning you get?

      • Alexander Embiricos

        Hi, thanks for answering 🙂
        If I open
        in Chrome and check my console I get “Uncaught TypeError: string is not a function” on line 7.

        However, if I remove the ‘use strict’, I don’t get any errors.

        Any ideas on what this could be?

        • lupomontero

          You are just missing a semicolon, see

          • Alexander Embiricos

            Oh god. Thanks!

          • lupomontero

            No prob! Two pairs of eyeballs always see more than just one.

  • petermiller1986

    this is the best explanation of closures i have yet seen. very useful thanks.

  • Jc

    Thanks. This is still nice and simple for anyone learning Javascript

    • lupomontero


  • Keith Garry

    I was able to immediately grasp this concept with your help. Thanks.

  • Leathan Axe

    from the future i thank you

    • Leathan Axe

      now the past 🙁