JavaScript – A Different Beast, Part-5: Closures
Using Closures – Examples
1. Closures as event handlers
Closures are extremely useful as event handlers. Say, you want to configure a button to do something. Naturally you will create a function and attach that as an event handler for that button. But, quite often, the code to be executed needs access to some data that is available only at the time of attaching it. In such cases, you can create a closure with the fixed values are bound variables and attach that as the event handler. See sample HTML page below, which has a textbox and a reset button. When the page opens, there is some value in the textbox (this normally would come from the web-server). User can change the value and then later reset it to the original value by clicking the reset button. The problem here is that when the reset button’s event handler executes, the original value is already gone. Look at how it is solved here using a closure.
//Example-1
<script type="text/javascript">// <![CDATA[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
function load(){ var txt = document.getElementById('txt'); var initialValue = txt.value; txt.onchange = function(){ var reset = document.getElementById('reset'); reset.onclick = function(){ //closure with initialValue bound txt.value = initialValue; } }//end of on-change } //end of load
// ]]></script></pre>
<h3>Example: Using closures for event handlers</h3>
<pre> <input id="txt" type="text" value="25" /></pre>
<button id="reset">Reset</button>Resets the textbox to the initial value(25)
2. Event handlers in a loop ( Good and bad closures )
Example HTML page below is a display board with 10 numeric keys and a text display. Hitting a number key should show the number in the display (textbox).
//Example-2 – Bad Closure<script type="text/javascript">// <![<span class="hiddenSpellError" pre="">CDATA</span>[
function load(){
var buts = document.getElementsByTagName('button');
for(i=0;i<10;i++){ buts[i].onclick = function(){ //bad closure document.getElementById('result').value += i; }; }
// ]]></script></pre>
<h2>Example: Bad Calc</h2>
<div id="calc">
<input id="result" type="text" disabled="disabled" />
<div><button id="but0">0</button>
<button id="but1">1</button>
<button id="but2">2</button>
<button id="but3">3</button>
<button id="but4">4</button>
<button id="but5">5</button>
<button id="but6">6</button>
<button id="but7">7</button>
<button id="but8">8</button>
<button id="but9">9</button></div>
</div>
<pre>
The code here is wrong. Clicking on any button here gives you the same output – 10! The bug here is the accidental closure getting created. The code here is attaching a closure to the onclick handler, where the variable i is a bound variable. It is bound to the scope of load function where the value of variable i keeps changing till it reaches 10. All the ten closures created refers to the same scope and that scope is now having a value of 10 for i. Figure below shows the scope chain.
- Accidental Closures
All the instances of the event handler functions are shown as f1, f2 upto f10. All these functions are created within the scope of function load and therefore share the scope and the variable i defined in it. Since the functions are then attached to the HTML DOM elements, 10 closures are formed causing the error. Solution:Using yet another closure
//Example-2 – Good Closure<script type="text/javascript">// <![<span class="hiddenSpellError" pre="">CDATA</span>[
function makeHandler(digit){
return function(){ //good closure, with digit bound in local scope
document.getElementById('result').value += digit;
};
}
function load(){
var buts = document.getElementsByTagName('button');
for(i=0;i<10;i++){ buts[i].onclick = makeHandler(i); } }
// ]]></script></pre>
<h2>Example: Good Calc</h2>
<div id="calc">
<input id="result" type="text" disabled="disabled" />
<div><button id="but0">0</button>
<button id="but1">1</button>
<button id="but2">2</button>
<button id="but3">3</button>
<button id="but4">4</button>
<button id="but5">5</button>
<button id="but6">6</button>
<button id="but7">7</button>
<button id="but8">8</button>
<button id="but9">9</button></div>
</div>
<pre>
Here, the makehandler function is called in the loop to create a closure. Each call to makehandler creates a new instance of the scope object which has a variable digit bound to the argument passed (1 to 9). The event handler is still a closure, but with the variable bound to 10 different scope instances.
3. Scheduling
Scheduling is very similar to the first example, where a function has to be called after some time using the setTimeOut method in JavaScript. Closures are helpful in all callback scenarios.
Next topic: Objects without Classes
Further Reading:
- An in-depth explanation on closures – http://www.jibbering.com/faq/notes/closures/
- Some theory on First Class Functions – http://en.wikipedia.org/wiki/First-class_function
// ]]>
Pages: 1 2
Posted on May 15, 2011, in JavaScript, Tutorial and tagged Closure (computer science), first class functions, functional programming, JavaScript, Languages, Local variable, Programming, Scope (programming), Tutorial. Bookmark the permalink. 4 Comments.
Technical Graffiti 
Pingback: Professional JavaScript, Part 2: Types and Type Conversion « Technical Graffiti
Pingback: Professional JavaScript, Part 3: Functions « Technical Graffiti
Pingback: Professional JavaScript, Part-4: Scopes and Scope Chain « Technical Graffiti
Pingback: JavaScript – A different beast « Technical Graffiti