What is a “closure” in JavaScript? Provide an example

A closure is a function defined inside another function (called the parent function), and has access to variables that are declared and defined in the parent function scope.

The closure has access to variables in three scopes:

  • Variables declared in their own scope
  • Variables declared in a parent function scope
  • Variables declared in the global namespace
var globalVar = "abc"; 

// Parent self invoking function 
(function outerFunction (outerArg) { // begin of scope outerFunction
    // Variable declared in outerFunction function scope 
    var outerFuncVar = 'x';    
    // Closure self-invoking function 
    (function innerFunction (innerArg) { // begin of scope innerFunction
        // variable declared in innerFunction function scope
        var innerFuncVar = "y"; 
        console.log(          
            "outerArg = " + outerArg + "\n" +
            "outerFuncVar = " + outerFuncVar + "\n" +
            "innerArg = " + innerArg + "\n" +
            "innerFuncVar = " + innerFuncVar + "\n" +
            "globalVar = " + globalVar);
 
    }// end of scope innerFunction)(5); // Pass 5 as parameter 
}// end of scope outerFunction )(7); // Pass 7 as parameter 

innerFunction is closure that is defined inside outerFunction and has access to all variables declared and defined in the outerFunction scope. In addition, the function defined inside another function as a closure will have access to variables declared in the global namespace.

Thus, the output of the code above would be:

outerArg = 7
outerFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc
Asked on January 18, 2019 in Javascript.
Add Comment


  • 5 Answer(s)

    A “closure” is an expression (typically a function) that can have free variables together with an environment that binds those variables (that “closes” the expression).

    The simple explanation of a Closure is that ECMAScript allows inner functions; function definitions and function expressions that are inside the function bodies of other functions. And that those inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s). A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function. Those local variables, parameter and function declarations (initially) have the values that they had when the outer function returned and may be interacted with by the inner function.

    Consider the following code that creates a closure with variables a and b
    closure
    =(function(){

    var a=3
    var b=5

    return function(operation){
    return operation(a,b)
    }
    }())


    // The variables a and b are now part of the closure (They are retained even after the outer function returns)


    closure
    (function(x,y){return x+y}) // outputs 8

    closure
    (function(x,y){return x*y}) // outputs 15`

    This particular closure can now take any function that operates on the variables a and b

    Answered on January 19, 2019.
    Add Comment

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

    The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

    You create a closure by adding a function inside another function.
    A Basic Example of Closures in JavaScript:

    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

    Answered on January 20, 2019.
    Add Comment

    JavaScript Closures
    Remember self-invoking functions? What does this function do?

    Example
    var add = (function () {
    var counter = 0;
    return function () {counter += 1; return counter}
    })();

    add();
    add();
    add();

    // the counter is now 3
    Example Explained
    The variable add is assigned the return value of a self-invoking function.

    The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

    This way add becomes a function. The “wonderful” part is that it can access the counter in the parent scope.

    This is called a JavaScript closure. It makes it possible for a function to have “private” variables.

    The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

    A closure is a function having access to the parent scope, even after the parent function has closed.

    Answered on January 27, 2019.
    Add Comment

    A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables — a scope chain.

    The closure has three scope chains:

    it has access to its own scope — variables defined between its curly brackets
    it has access to the outer function’s variables
    it has access to the global variables

    Answered on February 21, 2019.
    Add Comment

    JavaScript Closures
    Remember self-invoking functions? What does this function do?

    Example
    var add = (function () {
    var counter = 0;
    return function () {counter += 1; return counter}
    })();

    add();
    add();
    add();

    // the counter is now 3
    Example Explained
    The variable add is assigned the return value of a self-invoking function.

    The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

    This way add becomes a function. The “wonderful” part is that it can access the counter in the parent scope.

    This is called a JavaScript closure. It makes it possible for a function to have “private” variables.

    The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

    A closure is a function having access to the parent scope, even after the parent function has closed.

    Answered on February 23, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.