Understand JavaScript Closures With Ease

Closures are pretty and faithfully serviceable: they permit programmers to program creatively, expressively, and in brief. they're used oftentimes in JavaScript and, regardless of your JavaScript ability level, you'll no doubt encounter them. Sure, closures may seem advanced and on the far side your scope, however when reading this article, closures are additional far more simply understood and more appealing for usage in your everyday JavaScript programming.

This is a comparatively short (and sweet :) ) post on the main points of closures in JavaScript. you must be aware of JavaScript variable scope before you browse more, because to know closures you need to understand JavaScript’s variable scope.

What is a closure?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has 3 scope chains: it's access to its own scope (variables outlined between its curly  brackets), it's access to the outer function’s variables, and it's access to the global variables.

The inner function has access not solely to the outer function’s variables, however additionally to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, despite the fact that it can call the outer function’s parameters directly.
You create a closure by adding a function within another function.

function showName (firstName, lastName) {

var nameIntro = "Your name is ";

    // this inner function has access to the outer function's variables, including the parameter

function makeFullName () {        

return nameIntro + firstName + " " + lastName;

   

}

return makeFullName ();

}

showName ("Michael", "Jackson"); // Your name is Michael Jackson

Closures ar used extensively in Node.js; they're workhorses in Node.js’ asynchronous, non-blocking design. Closures are often utilized in jQuery and almost every bit of JavaScript code you browse.

A Classic jQuery Example of Closures:


$(function() {

var selections = []; 

$(".niners").click(function() { // this closure has access to the selections variable

selections.push (this.prop("name")); // update the selections variable in the outer function's scope

});

});

Closures’ Rules and side Effects

Closures have access to the outer function’s variable even once the outer function returns:

One of the foremost difficult  and hard options with closures is that the inner function still has access to the outer function’s variables even once the outer function has returned. Yep, you read that properly. once functions in JavaScript execute, they use a similar scope chain that was in effect after they were created. this implies that even once the outer function has returned, the inner function still has access to the outer function’s variables. Therefore, you'll call the inner function later in your program. this instance demonstrates:

function celebrityName (firstName) {
    var nameIntro = "This celebrity is ";
    // this inner function has access to the outer function's variables, including the parameter
   function lastName (theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return lastName;
}
var mjName = celebrityName ("Michael"); // At this juncture, the celebrityName outer function has returned.
// The closure (lastName) is called here after the outer function has returned above
// Yet, the closure still has access to the outer function's variables and parameter

mjName ("Jackson"); // This celebrity is Michael Jackson

Closures store references to the outer function’s variables;

they do not store the particular value. 
Closures get additional fascinating once the value of the outer function’s variable changes before the closure is called. And this powerful feature can be controlled in artistic ways that, like this private variables example 1st incontestible by Douglas Crockford:


function celebrityID () {
    var celebrityID = 999;
    // We are returning an object with some inner functions
    // All the inner functions have access to the outer function's variables
    return {
        getID: function ()  {
            // This inner function will return the UPDATED celebrityID variable
            // It will return the current value of celebrityID, even after the changeTheID function changes it
          return celebrityID;
        },
        setID: function (theNewID)  {
            // This inner function will change the outer function's variable anytime
            celebrityID = theNewID;
        }
    }

}
var mjID = celebrityID (); // At this juncture, the celebrityID outer function has returned.
mjID.getID(); // 999
mjID.setID(567); // Changes the outer function's variable

mjID.getID(); // 567: It returns the updated celebrityId variable

Closures Gone Awry


as a result of closures have access to the updated values of the outer function’s variables, they'll conjointly cause bugs once the outer function’s variable changes with a for loop. Thus:

// This example is explained in detail below (just after this code box).
function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i++) {
      theCelebrities[i]["id"] = function ()  {
        return uniqueID + i;
      }
    }
    
    return theCelebrities;
}
var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
var stalloneID = createIdForActionCelebs [0];

console.log(stalloneID.id()); // 103

In the preceding example, by the time the anonymous functions are known as, the value of i is three (the length of the array so it increments). the quantity the amount was supplemental to the uniqueID to make 103 for ALL the celebritiesID. thus each position within the returned array get id = 103, rather than the meant one hundred, 101, 102.


The reason this happened was because, as we've mentioned within the previous example, the closure (the anonymous function during this example) has access to the outer function’s variables by reference, not by worth. thus even as the previous example showed that we are able to access the updated variable with the closure, this instance equally accessed the i variable once it had been modified, since the outer function runs the whole for loop and returns the last value of i, that is 103.

function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i++) {
        theCelebrities[i]["id"] = function (j)  { // the j parametric variable is the i passed in on invocation of this IIFE
            return function () {
                return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array
            } () // BY adding () at the end of this function, we are executing it immediately and returning just the value of uniqueID + j, instead of returning a function.
        } (i); // immediately invoke the function passing the i variable as a parameter
    }
    return theCelebrities;
}
var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
var stalloneID = createIdForActionCelebs [0];
console.log(stalloneID.id); // 100
var cruiseID = createIdForActionCelebs [1];

console.log(cruiseID.id); // 101

Leave your comments :)