Closure in JavaScript

JavaScript works on lexical scoping. To understand it better, 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 preceding code “hello foo” will be printed in the console. This is because of the lexical scoping in JavaScript. In JavaScript an inner function has access to the variable from the outer function or the function it is nested in. In JavaScript a scope of a variable is either global or to the function it is defined in. Each variable is hoisted to the top of the scope. Read "Hoisting in JavaScript: Simplified" here.

Let us consider another code listing, a slightly modified version of the preceding sample. 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 preceding snippet will also provide us the same output and hello foo will be printed to the console.

Let us examine why it is happening. The first observation that should come to your mind is that when myapp() has been executed, the local variable inside the myapp function should not be available for use. Hence the expected output should be hello undefined. However we can still use the local variable in the function that is returned from the function in which the local variable is defined. This is known as closure. In the preceding code the snippet result is a JavaScript closure.

In JavaScript closure consists 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 when the function was created.



In the preceding code snippet the result is a closure that has the information of the function and its environment when it was created. In this scenario environment is the local variable. So the result is a closure that 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 the preceding code snippet a and b are the JavaScript closures. Since they are closure they have information about the function greet and the environment variable's name and message. As output you will get hello dj and whatsúp mahesh. I hope this basic explanation of closure helps you.