5.Detailed Look At Closure

Introduction

In simple term, Closure is nothing but the technique that use to maintain or extend the life time of the inner scope variables. Not clear ?. let me explain in detail , but before that you need to know what scope in javascript means.

Scope

Scope in javascript defines accessibility of declared variables, there are three types of scopes in javascript.global, function, block level scopes.

Global scope

By the name, you would have guessed, when you simply declare a variable in a javascript file it becomes global variable and part of window object.and that variable is accessible everywhere in your application.

1 //this is now part of window object(i.e window.obj)
2 //and accessible everywhere.
3 var obj=true;

Function scope

The variables declared inside a function will be having the function scope and it is accessible only to that function.

1 function foo()
2 {
3     var variable1=true;
4     //variable1 is accessible only inside this function
5     console.log(variable1);
6 }
7 foo();//result true
8 console.log(variable1); //result undefined

As you see variable1 is accessible only to the function foo, once foo is invoked and function call end’s the lifetime of variable1 will be expired. and this is called function scope.

Block scope

This is also similar to function scope, the variable’s declared inside a block will be available only to that block.

1 if(i>1)
2 {
3     var variable1=true;
4     //variable1 is accessible only inside this if block.
5     console.log(variable1);
6 }
7 console.log(variable1); //result undefined

A block can be also like this

1 {
2     var variable1=true;
3     //variable1 is accessible only inside this if block.
4     console.log(variable1);
5 }
6 console.log(variable1); //result undefined

Strange right!. This is also consider as block and variables defined inside a block will have isolated scope and lifetime.

Global Scope & Local Scope

When you declare a global variable and you have block or function which has declared a same variable what will happen ?. Let’s have a look.

 1 var variable1='global';
 2 
 3 function func1()
 4 {
 5     //uses global variable
 6     console.log(variable1);
 7 }
 8 
 9 function func2()
10 {
11     var variable1='local';
12     //uses local variable
13     console.log(variable1);
14 }
15 
16 func1(); //result global
17 func2(); //result local

So you can clearly see when a variable is declared under a local scope which has same name as global scope variable, only the local scope variable is taken into account. In other words any attempt to a variable access will result only from the nearest scope.

Closure

Now, lets come to the actual topic.Closure is used to retain the lifetime of other scoped variable by maintaining external reference to the one of the inner object which have access to that local variable. Let’s look at an example.

1 function foo()
2 {
3     var name='';
4     console.log(name);
5 }
6 foo() //after this point the lifetime of name is expired

After the foo is invoked the lifetime of variable ‘name’ which is declared inside foo will be expired.

Now let’s consider what if we need to maintain lifetime of variable ‘name’ even after foo function call. Let’s have a look.

 1 function foo()
 2 {
 3     var name='';
 4 
 5     return {
 6         getName:function(){
 7             return name;
 8         },
 9         setName:function(value){
10             name=value;
11         }
12     }
13 }
14 
15 var obj=foo();
16 obj.setName('tony');
17 obj.getName();
18 //still have access to name variable
19 //due to external reference.

As you see in the above example, the variable name is declared inside foo and an object containing getName and setName is returned at end of the function.so when you invoke foo, an object will be returned and because of that object’s external reference the lifetime of variable ‘name’ will be maintained. Since the returned object’s scope is in the inner scope of foo.

One thing to note here is , using this technique we can achieve the private variable encapsulation. In the above example, after foo call, you cannot access the variable ‘name’ directly , instead the function inside the object is used to get/set the variable values.

This is called closure !