JavaScript works on lexical scoping. To understand it in better way, let us consider the following listing,

function myapp() {
    var name = "foo";
    function greet() {
        console.log("hello " + name);
    }

    greet();
}
myapp();

As you see greet is the inner function of the myapp function, and it has access to the local variable of the outer function. When you run the above listed code “hello foo” will be printed in the console. This is because of the lexical scoping in the JavaScript. In the JavaScript an inner function has access to the variable from the outer function or the function it is nested in. In the JavaScript a scope of a variable is either global or to the function it is defined in. Each variables are hoist at the top of the scope.

Read Hoisting in JavaScript: Simplified here

Let us consider another code listing, slightly modified version of the snipped we discussed above. In this we are returning the greet function from the myapp function. Keep in mind that greet is the inner function whereas myapp is the outer function.

function myapp() {
    var name = "foo";
    function greet() {
        console.log("hello " + name);
    }

    return greet;
}

var result = myapp();
result();

To be surprised the above snippet will also give us the same output, and hello foo will be printed in the console.

Let us examine why it is happening? First observation should come to your mind that, once myapp() got executed, the local variable inside myapp function should not be available to use. Hence the expected output should be hello undefined. However we can still use the local variable in the function which is return from the function in which the local variable is defined. This is known as the CLOSURE. In above code snippet result is a JavaScript closure.

In JavaScript closure consist of the function and the environment in which the function was created. Keep in mind that JavaScript closure is an object and it contains the function and the environment at the time function was created.

 

image

In above code snippet result is a closure which has the information of the function and its environment when it was created. In this scenario environment is the local variable. So result is a closure which has the information about the greet function and the variable name. Let us consider one more example to understand closure


function app(name) {

    function greet(message) {
        return message + " " + name;
    }

    return greet;
}

var a = app("dj");
var result1 = a("hello");
console.log(result1);

var b = app("mahesh");
var result2 = b("whats'up");
console.log(result2);

In above code snippet a and b are the JavaScript closures. Since they are closure so they have information about function greet and the environment variables name and message. As output you will get hello dj and whatsúp mahesh. I hope this basic explanation of closure helps you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s