JavaScript for the C# Developer Part 5 – Closures are Simple

Previous: JavaScript for the C# Developer Part 4 – JavaScript’s Dangerous and Wild Type System

One of the problems C# developers have wrapping their brains around JavaScript is that there are a few concepts that don’t clearly map to what they already understand; concepts with scary names. Closures are one of those concepts. Wikipedia has an article on closures that I think illustrates this point rather well – it takes a relatively simple topic and makes it sound really complicated! If you understood what it says on first reading you have my congratulations.

In JavaScript for the C# Developer Part 3 – Functions, I showed a number of ways you can use functions to protect your variables from collisions with other scripts. The first example I used looks like this.


This protects the variable x within the two functions, but it only allows for a simple sort of execution – I have to call foo whenever I want to invoke bar! Furthermore, what if I want to use bar in many different contexts and I want each of them to have a unique value for x? This is where closures come into play.

A Closure is a Cocoon of Love that Protects your Variables

A closure encapsulates (creates a protected wrapper around) the contents of a function allowing the contents to exist after the function executes. All that is required is for the function to assign its internals to something outside of itself or to return its internals via the return statement. Here is a simple example of a closure in action (http://jsfiddle.net/DougWare/t87kB/).


In this example the function foo() is executed twice. Each time the function bar() is returned and assigned to a variable: first f1 and then f2. Both calls create a closure that creates a protected copy of the variable i for the use of each closure. Executing f1() twice alerts the values 0 and 1. Executing f2() twice does the same thing proving that each has its own distinct copy of i.

The Key is the Call

The only aspect of this that I have seen confuse people after they understand the first example is that they sometimes think the closure is unique to individual functions. But this example shows that even though there are three functions within the outer function, there is only one closure (http://jsfiddle.net/DougWare/SwAdg/).


Now, you probably read that example and thought, ‘gee that’s obvious!’ Alright smarty-pants, try this one (http://jsfiddle.net/DougWare/wEZvq/)!


In this example, which uses jQuery, there are two buttons. Each if these is bound to a function that increments a variable named x. What will you see when you click one button and then the other?

The answer is 1 and then 2. The buttons share the same instance of x from the closure created by document ready – $(function(){}); is shorthand for $(document).ready(function(){});

If what we want is for each click function to get its own copy of x we could rewrite the sample as follows (http://jsfiddle.net/DougWare/wEZvq/2/).


In this version the function that is invoked for each of the buttons creates a closure. Click the buttons to see that each has its own copy of x.

Conclusion

Closures provide an effective way to protect you variables and manage scope. They offer encapsulation, but closures aren’t the only way to achieve encapsulation. You can use objects… which is the subject of the next post!

Next: JavaScript for the C# Developer Part 6 – Objects

–Doug

Author: Doug Ware