D4mations.com

Javascript Closure tutorial ( Closures Explained )



What are closures in javaScript and how and where to use them.

So what is closure in javascript?
“whenever you declare a function inside another function, the inside function(s) is/are recreated again each time the outside function is called”

“Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.”

Original source

d4mer

, , , , , , , , , , , ,

30 responses to “Javascript Closure tutorial ( Closures Explained )”

  8. var passed = 3;

    var addTo = function(){
    var inner=2;
    return passed+inner;
    };

    console.dir(addTo);
    var passed = 4;
    console.dir(addTo);

    by this code, both the closure have the same value but when we doing console.log answer is different.
    both the closure showing 4 in chrome.
    but at the time of result, it's showing 5,6 why??

  11. A closure is an inner function that has access to the outer function's variables. Obviously the inner function has access to its own function scope ('local' variables defined between its braces), and it has access to the outer function's variables, which are Closures, and it has access to the global variables.

  13. Thanks for the great video and tutorial. This is how I like to think of
    closures. Please feel free to correct me if my understanding of some
    concepts aren't correct as I'm just learning about closures myself.

    /*
    The closure of a function is the function(s) its enclosed in and the
    inner function(s) has access to the variables defined in those closures
    even after those functions are no longer on the execution stack. Paste
    and run the below directly in Google Chrome console (not Fiddle) and drill down into the
    scopes to check the closures out. In the below example the inner
    function is enclosed in speak function hence it's closure is the
    function speak. If speak itself was within another outer function then
    inner function has TWO closures the speak function as well as the outer
    one enclosing speak.
    */

    function speak(greeting)
    {
    var inner = function (name)
    {
    console.log(greeting + " " + name);
    }

    return inner
    }

    var theGreeting = speak("Hello");

    console.log(theGreeting("Adam"));
    console.dir(theGreeting);

  14. the new word are used with constructors, it just distracts my attention here
    "Closures are functions which use variables outside of the function", I don't know if i can sum it up this way

  20. Thank you for excellent video but I have some doubt here and please correct me if I am wrong.
    I ran your code in chrome 57.* (latest) version. I used jsfiddler and I am able to see 'passed' var is available under closure prop but it is also showing this closure is part of window.onload function. In that case, its inner function and doesn't agree with your first example.

    If I write same logic in console window then 'passed' is showing under 'global' prop. Please explain this.

    jsfiddler code

    https://jsfiddle.net/rajkishor09/wkv7q1nd/

Leave a Reply