JavaScript Closure In Action

Who is this article intended for?

 

All folks who are working with JavaScript, learning JavaScript, or have been using fancy JavaScript frameworks and platforms like AngularJS, NodeJS or even as basic as jQuery or if you plan to start writing JavaScript and transitioning from object-oriented languages like C# or you are a reader and like reading non-fiction articles.

 

JavaScript

 

JavaScript is the most forgiving language I have ever come across. Everything just seems to work, well this can be dangerous, sometimes - if not always; we might end up writing something that works but may be very inefficient or even worst, after a long day’s work, the script might seem perfect but the output may be equally bizarre. I agree that JavaScript may be unintuitive, occasionally, even counterintuitive. Let’s look at the following example to see what I mean.

 

JavaScript 

'use strict'
for(var i = 0; i < 10; i++) {
    console.log('"i" is equal to ' + i);
}
//Code 1.0

Can you guess what output will it produce? You guessed it right.

 

It will produce the following output, 

1. "i" is equal to 0   
2. "i" is equal to 1   
3. "i" is equal to 2   
4. "i" is equal to 3   
5. "i" is equal to 4   
6. "i" is equal to 5   
7. "i" is equal to 6   
8. "i" is equal to 7   
9. "i" is equal to 8   
10. "i" is equal to 9    
11.   
12. //Output 1.0  

Pretty predictable right? Now, let's add a tiny bit of complexity, we want to add a delay between the output prints. Meaning, we want to print 0 instantly, 1 after 1 sec, 2 after 2 sec and so on and so forth. This isn’t much of a challenge, right? Following your intuitions you might write something similar.

 

JavaScript

'use strict'
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log('"i" is equal to ' + i + ' (after ' + i + ' secs)');
    }, (1000 * i));
}
//Code 1.1

And you would be expecting following output, 

1. "i" is equal to 0 (after 0 secs)   
2. "i" is equal to 1 (after 1 secs)   
3. "i" is equal to 2 (after 2 secs)   
4. "i" is equal to 3 (after 3 secs)   
5. "i" is equal to 4 (after 4 secs)   
6. "i" is equal to 5 (after 5 secs)   
7. "i" is equal to 6 (after 6 secs)   
8. "i" is equal to 7 (after 7 secs)   
9. "i" is equal to 8 (after 8 secs)   
10. "i" is equal to 9 (after 9 secs)    
11.   
12. //Assumed Output 1.1  

If you thought so, I won’t blame you.

 

Above code will actually produce following output.

 

Bizarre right? Didn’t I say that javascript can be counterintuitive sometimes!

 

What just happened? – Well, Meet Closure!

 

What you just encountered is called closure. Well, Don’t be rude, say hello! Closure is a friend if understood and used wisely but a fearful enemy if left unnoticed.

 

Closure enables functions to remember its scope of execution. Meaning, it makes functions remember the variables and other functions it refers to. Closure makes the referred variables and functions available, even after the scope is exited, latest values are reflected. The simplest example of closure is following hello world example,

 

JavaScript

'use strict'
//Following function returns a function which prints - Hello `name`!
function sayHelloTo(name) {
    return function() {
        //This function "remembers" the name -- thanks to closure.
        console.log('Hello ' + name + '!');
    }
}
var helloWorld = sayHelloTo('World');
/*    The closure enables the child function "remember" the "name" variable    even after the parent scope has exited. */
//Prints out "Hello World!" in the console.
helloWorld();
//Code 1.2

produces

1. Hello World!  //output 1.2   

Pretty neat right? And this is what happened with our first example, closure. A little bit cryptic, ain’t it? Let me elaborate, javascript runs on a single thread, so it queues up tasks that need differed execution, remember setTimeout - we used it in our first example? So what happened with the example is first the for loop executes and iterates for 10 times with value of i = 0 to 9, with each iteration it executes setTimeout block with appropriate value of i, meaning for i = 0 => setTimeout(<function>,0) for i = 1 => setTimeout(<function>,1000) and for i = 9 => setTimeout(<function>,9000).

 

Now setTimeout is executed but the <function> goes through deferred execution, so the first <function> is executed only after the for loop is executed completely. So at the time when <function> executes, the for loop has already exited, and the final value is equal to 10. Now due to closure, <function> remembers the I and fetches the latest value, which is 10 and hence the cryptic output. What we learned is that the value of i is NOT COPIED for each iteration instead the reference is remembered.

 

How do I make it work then?

 

There is more than one way to get what we want. First let's look at IIFE.

 

Option 1: IIFE

 

IIFE (immediately-invoked function expression) are function expressions that are executed as soon as they are defined. For example

 

JavaScript 

'use strict'
//The IIFE
(function(arguments) {
    /* Awesomeness goes here */
})();
//Code 1.3

As you can see that the function is invoked as soon as it is defined. So we can rewrite Code 1.1 as,

 

JavaScript

'use strict'
for(var i = 0; i < 10; i++) {
    /*      IIFE with a parameter i, this i parameter is different then i in
               the for loop. IIFE forces a new execution scope to be created
               and current *value* of the i in for loop is *copied* to the new
               scope
      */
    (function(i) {
        //i has *value* i (of for loop) at the time of invocation
        setTimeout(function() {
            console.log('"i" is equal to ' + i + ' (after ' + i + ' secs)');
        }, (1000 * i));
    })(i); //i of the for loop is passed as parameter, forcing new scope to be
    //created with current copy of i.
}
//Code 1.1.1

Option 2: Function.prototype.bind

The above example with IIFE looks quite complex and mouthful. As we now have an idea on how to solve the problem on hand, all we need to do is force create new scope and Function.prototype.bind can be used to do so.

 

JavaScript 

'use strict'
for(var i = 0; i < 10; i++) {
    /*
          (<function(i)>).bind(this, i) forces a new scope to be created *copying*
          the current *value* of i
    */
    setTimeout((function(i) {
        console.log('"i" is equal to ' + i + ' (after ' + i + ' secs)');
    }).bind(this, i), (1000 * i));
}
// Code 1.1.2

This version is very much similar to Code 1.1, only difference is instead of setTimeout(<function>,timeout) we have setTimeout( (<function(i)>).bind(this, i), timeout). So instead of asking setTimeout to defer <function> we are asking it to defer a copy of <function>bound to current value of i. 

 

Option 3: The ES6 way!

 

Let is almost exactly same as var except the fact that it creates lexically scoped variables. Variables created declared with let have limited to the scope they are defined in, in case of for loop, for each iteration, new copy of i is created which limits to that particular iteration.

 

JavaScript 

'use strict'
/*    We are using `let` instead of `var`, `let` creates a `lexically` scoped
      variable i, meaning, for each iteration of for loop a new copy of i is
      created, so closure captures the `lexically` scoped reference
*/
for(let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log('"i" is equal to ' + i + ' (after ' + i + ' secs)');
    }, (1000 * i));
}
// Code 1.1.3

All of these three options produce following output.

 

JavaScript

"i"
is equal to 0(after 0 secs)
"i"
is equal to 1(after 1 secs)
"i"
is equal to 2(after 2 secs)
"i"
is equal to 3(after 3 secs)
"i"
is equal to 4(after 4 secs)
"i"
is equal to 5(after 5 secs)
"i"
is equal to 6(after 6 secs)
"i"
is equal to 7(after 7 secs)
"i"
is equal to 8(after 8 secs)
"i"
is equal to 9(after 9 secs)
    // Output for 1.1.1, 1.1.2, 1.1.3

A word of Caution

As you can see, closures are powerful, but as uncle ben once said With great power comes great responsibility. Unnecessary usage of closure can make your code inefficient. Because every time a closure is created memory is consumed to store and maintain the references, sometimes this will result in a poor-quality program. So always make sure that you eliminate any unnecessary and unintended closures.

 

For example, one should not write functions inside functions and access parent functions values when there are better ways to do the same thing. Because doing so would create unnecessary closure. Take a look at the following example.

 

JavaScript 

'use strict'

function Car(make, model) {
    return {
        setMake: function(value) {
            make = value;
        },
        getMake: function() {
            return this.make;
        },
        setModel: function(value) {
            model = value;
        },
        getModel: function() {
            return model;
        },
        print: function() {
            console.log(make, model);
        }
    }
}
var skodaSuperb = Car('Skoda', 'Superb');
skodaSuperb.print();
skodaSuperb.setModel('Octavia');
skodaSuperb.print();
// code 1.4

Output

Skoda Superb
Skoda Octavia
//output 1.4

This code heavily uses closures, but does not need to, there are better ways to do it, for example look at the following example.

 

JavaScript 

'use strict'

function Car(make, model) {
    this.make = make;
    this.model = model;
    this.setMake = function(make) {
        this.make = make;
    }
    this.getMake = function() {
        return this.make;
    }
    this.setModel = function(model) {
        this.model = model;
    }
    this.getModel = function() {
        return this.model;
    }
    this.print = function() {
        console.log(this.make, this.model);
    }
}
var skodaSuperb = new Car('Skoda', 'Superb');
skodaSuperb.print();
skodaSuperb.setModel('Octavia');
skodaSuperb.print();
// code 1.5

Output

Skoda Superb
Skoda Octavia

//output 1.5

Above code is written in the right direction and also looks fine, but if you take another look, you’d see that each function this.setMake, this.getMake, this.setModel, this.getModel and this.print creates a closure, which is clearly not required or used anywhere in the program. So it would be wise to remove them by following any of the two options

Option 1: Setting the prototype

It is wise to put the functions in the prototype, as shown below

 

JavaScript

'use strict'

function Car(make, model) {
    this.make = make;
    this.model = model;
}
/* attach functions to the prototype */
Car.prototype.setMake = function(make) {
    this.make = make;
}
Car.prototype.getMake = function() {
    return this.make;
}
Car.prototype.setModel = function(model) {
    this.model = model;
}
Car.prototype.getModel = function() {
    return this.model;
}
Car.prototype.print = function() {
    console.log(this.make, this.model);
}
var skodaSuperb = new Car('Skoda', 'Superb');
skodaSuperb.print();
skodaSuperb.setModel('Octavia');
skodaSuperb.print();
//code 1.5

output

Skoda Superb
Skoda Octavia

//output 1.5

Above code is what should be written ideally. No Unnecessary closure are created and all’s well.

 

Option 2: Function.prototype.call (A cleaner way)

 

This method is very similar to option 1, actually we are writing option 1 is a more readable way.

 

JavaScript

'use strict'

function Car(make, model) {
    this.make = make;
    this.model = model;
}
(function() {
    this.setMake = function(make) {
        this.make = make;
    }
    this.getMake = function() {
        return this.make;
    }
    this.setModel = function(model) {
        this.model = model;
    }
    this.getModel = function() {
        return this.model;
    }
    this.print = function() {
        console.log(this.make, this.model);
    }
}).call(Car.prototype);
//Passing Car.prototype as "this"
//using Function.prototype.call, attaching required functions
//to Car's prototype
var skodaSuperb = new Car('Skoda', 'Superb');
skodaSuperb.print();
skodaSuperb.setModel('Octavia');
skodaSuperb.print();
//code 1.6

output

 

1. Skoda Superb   
2. Skoda Octavia    
3.   
4. //output 1.6  

or

 

Option 2.1 (Nonobject Oriented way)

 

function.prototype.call can be used differently (not like option 2’s Object-Oriented Way).

 

JavaScript

'use strict'

function Car(make, model) {
    this.make = make;
    this.model = model;
}

function setMake(make) {
    this.make = make;
}

function getMake() {
    return this.make;
}

function setModel(model) {
    this.model = model;
}

function getModel() {
    return this.model;
}

function print() {
    console.log(this.make, this.model);
}
var skodaSuperb = new Car('Skoda', 'Superb');
//this is set to skodaSuperb for print function
print.call(skodaSuperb);
//this is set to skodaSuperb for setModel function
setModel.call(skodaSuperb, 'Octavia');
print.call(skodaSuperb);
// code 1.6.1

Output

1. Skoda Superb   
2. Skoda Octavia    
3.   
4. //output 1.6  

There are more ways to get the same thing done, and you’d be the judge of whats the best given the scenario.

 

What now?

 

This was my attempt to explain closure and how it affects almost every line of code that we write in javascript and how to take advantage of it and how to avoid it, how to create new execution scopes etc.

 

In coming articles we’ll take a look into functional programming with javascript, then on basic building blocks of functional programming - call, bind and apply along with very handy higher-order functions like map, reduce and filter.

 

I hope you guys enjoyed this article. Feel free to comment below, See you soon.

 

Read more articles on JavaScript

• The JavaScript Module Pattern Used With jQuery
• Voice of a Developer: JavaScript Objects