Closure for dummies - a complete guide to understanding closures in Javascript

The concept of closures in Javascript can be hard to grasp at first. However, once you will have that a-ha moment, a new powerful capability of Javascript will have been revealed to you. That’s ok, because closures are considered an advanced concept of Javascript.

According to Javascript - the definitive guide, 6th edition a function is a block of JavaScript code that is defined once but may be executed, or invoked, any number of times.

In JavaScript, functions are objects and can be assigned to variables. JavaScript function definitions can be nested within other function, and they have access to any variables that are in the scope where they are defined.

• Learn closures with Bob Tabor and cats

Bob defines a closure as a special type of object, that combines a function and the environment in which that function was created. The environment consists of the local variables that were in scope at the time the closure was created , as well as any input parameters that were passed in. We get both the function implementation, as well as its environment.

You are binding some data to a function, storing it as a variable for later usage in the program.

• Learn closures with a definitive example

Javascript uses lexical scoping - functions are executed using the variable scope that was in effect when they were defined not the variable scope that is in effect when they are invoked.

Definition 1: Closure The combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved, is called a closure in computer science literature.

Every Javascript function is a closure: they are objects and they have a scope chain associated with them. Let us look at an example

function counter() {
var n = 0;
    return {
        count: function() { return n++; },
        reset: function() { n = 0; }
    };
}

var c = counter(), d = counter(); // Create two counters
c.count() // => 0
d.count() // => 0: they count independently
c.reset() // reset() and count() methods share state
c.count() // => 0: because we reset c
d.count() // => 1: d was not reset

The counter() function returns a “counter” object. The object has two methods:
* count() - returns the next integer * reset() - resets the internal state

The two methods share the acces to the private variable b. Each invocation of counter() creates a new scope chain and a new private variable

So if you call counter() twice, two counter objects with different private variables will result.

• Master the JavaScript interview : What is a closure?

This article from Medium.

Definition 2: (Closures)A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

You see, the definition is simply another flavor of what we know so far.

In a next example, the .get() method is defined inside the scope of getSecret(), which gives it access to any variables from getSecret(), and makes it a privileged method. In this case, the parameter, secret. Have a play with closure on JSBin:

JS Bin on jsbin.com

• Learn closures with Joe

Your skill as a JavaScript developer can be measured by how well you understand closures. Joe says so

Definition 3: (Closures) The idea of closures is accessing variables from outside of the current local scope. From any function you can access the variable that are above the function in the scope hierarchy.

The idea becomes more useful when we have a function inside another function. Let us see an example below. From the inside() function we can access the firstScope variable from the outside function (because they are functions inside a function).

function outside(){
    var firstScope = "one";

    function inside(){
        var secondScope = "two";
        return firstScope + secondScope;
    }

    console.log(inside);
}

The result will be: onetwo.

The real benefit comes into play when we actually return the function:

function outside(){
    var firstScope = "one";

    return function inside(){
        var secondScope = "two";
        return firstScope + secondScope;
    };
}

var inner = outside();

console.log(inner());

The result will be the same: onetwo. The function returned a value that referenced something from outside the scope.

• Scope and closure with Udacity

I like Udacity’s take on closures. https://classroom.udacity.com/courses/ud015/lessons/2593668697/concepts/25411890500923 No comments needed, just watch for yourself.

• Pluralsight take on closures

The top of the cake is maybe this take of Pluralsight https://app.pluralsight.com/player?course=advanced-javascript&author=kyle-simpson&name=advanced-javascript-m3&clip=0

Definition 4: (Closures) Closure is the capability for a function to remember and access its lexical scope even when the function is executing outside that lexical scope.

Javascript has first class functions: functions can be passed around and executed in different environments.

function foo(){
    var firstScope = "one";

    function inside(){
        console.log(firstScope);
    }

    bam(baz);
}

function bam(baz){
    baz(); //"bar"
}

foo();

We call function bam. There is a bubble around 1-9 and function can access the variable on line 12. The lexical scope stayed attached to that function, no matter where it was transported.

What practical example have you used to understand closures? Share it here!