JavaScript closures vs anonymous functions

Question

A friend of mine and I are currently discussing what is a closure in JS and what isn t  We just want to make sure we really understand it correctly   Let s take this example  We have a counting loop and want to print the counter variable on the console delayed  Therefore we use setTimeout and closures to capture the value of the counter variable to make sure that it will not print N times the value N   The wrong solution without closures or anything near to closures would be   for var i   0  i  lt  10  i          setTimeout function             console log i          1000       which will of course print 10 times the value of i after the loop  namely 10   So his attempt was   for var i   0  i  lt  10  i           function            var i2   i          setTimeout function                console log i2              1000                printing 0 to 9 as expected   I told him that he isn t using a closure to capture i  but he insists that he is  I proved that he doesn t use closures by putting the for loop body within another setTimeout  passing his anonymous function to setTimeout   printing 10 times 10 again  The same applies if I store his function in a var and execute it after the loop  also printing 10 times 10  So my argument is that he doesn t really capture the value of i  making his version not a closure   My attempt was   for var i   0  i  lt  10  i          setTimeout  function i2           return function                 console log i2                    i   1000       So I capture i  named i2 within the closure   but now I return another function and pass this around  In my case  the function passed to setTimeout really captures i   Now who is using closures and who isn t   Note that both solutions print 0 to 9 on the console delayed  so they solve the original problem  but we want to understand which of those two solutions uses closures to accomplish this

User · Answer

I wrote this a while ago to remind myself of what a closure is and how it works in JS.

A closure is a function that, when called, uses the scope in which it was declared, not the scope in which it was called. In javaScript, all functions behave like this. Variable values in a scope persist as long as there is a function that still points to them. The exception to the rule is 'this', which refers to the object that the function is inside when it is called.

var z = 1;
function x(){
    var z = 2; 
    y(function(){
      alert(z);
    });
}
function y(f){
    var z = 3;
    f();
}
x(); //alerts '2'

User · Answer

After inspecting closely  looks like both of you are using closure   In your friends case  i is accessed inside anonymous function 1 and i2 is accessed in anonymous function 2 where the console log is present   In your case you are accessing i2 inside anonymous function where console log is present  Add a debugger  statement before console log and in chrome developer tools under  Scope variables  it will tell under what scope the variable is

User · Answer

Closure A closure is not a function  and not an expression  It must be seen as a kind of  snapshot  from the used variables outside the function scope and used inside the function  Grammatically  one should say   take the closure of the variables   Again  in other words  A closure is a copy of the relevant context of variables on which the function depends on  Once more  na  f   A closure is having access to variables who are not being passed as parameter  Bear in mind that these functional concepts strongly depend upon the programming language   environment you use  In JavaScript  the closure depends on lexical scoping  which is true in most C-languages   So  returning a function is mostly returning an anonymous unnamed function  When the function access variables  not passed as parameter  and within its  lexical  scope  a closure has been taken  So  concerning your examples     1 for var i   0  i  lt  10  i          setTimeout function             console log i      closure  only when loop finishes within 1000 ms         1000                i   10 for all functions      2 for var i   0  i  lt  10  i           function            var i2   i     closure of i  lexical scope  for-loop          setTimeout function                console log i2      closure of i2  lexical scope outer function             1000                 3 for var i   0  i  lt  10  i          setTimeout  function i2           return function                 console log i2      closure of i2  outer scope                    i   1000      param access i  no closure     All are using closures  Don t confuse the point of execution with closures  If the  snapshot  of the closures is taken at the wrong moment  the values may be unexpected but certainly a closure is taken

User · Answer

Editor s Note  All functions in JavaScript are closures as explained in this post  However we are only interested in identifying a subset of these functions which are interesting from a theoretical point of view  Henceforth any reference to the word closure will refer to this subset of functions unless otherwise stated   A simple explanation for closures    Take a function  Let s call it F  List all the variables of F  The variables may be of two types    Local variables  bound variables  Non-local variables  free variables   If F has no free variables then it cannot be a closure  If F has any free variables  which are defined in a parent scope of F  then    There must be only one parent scope of F to which a free variable is bound  If F is referenced from outside that parent scope  then it becomes a closure for that free variable  That free variable is called an upvalue of the closure F     Now let s use this to figure out who uses closures and who doesn t  for the sake of explanation I have named the functions    Case 1  Your Friend s Program  for  var i   0  i  lt  10  i           function f             var i2   i          setTimeout function g                 console log i2              1000                 In the above program there are two functions  f and g  Let s see if they are closures   For f    List the variables    i2 is a local variable  i is a free variable  setTimeout is a free variable  g is a local variable  console is a free variable   Find the parent scope to which each free variable is bound    i is bound to the global scope  setTimeout is bound to the global scope  console is bound to the global scope   In which scope is the function referenced  The global scope    Hence i is not closed over by f  Hence setTimeout is not closed over by f  Hence console is not closed over by f     Thus the function f is not a closure   For g    List the variables    console is a free variable  i2 is a free variable   Find the parent scope to which each free variable is bound    console is bound to the global scope  i2 is bound to the scope of f   In which scope is the function referenced  The scope of setTimeout    Hence console is not closed over by g  Hence i2 is closed over by g     Thus the function g is a closure for the free variable i2  which is an upvalue for g  when it s referenced from within setTimeout   Bad for you  Your friend is using a closure  The inner function is a closure   Case 2  Your Program  for  var i   0  i  lt  10  i          setTimeout  function f i2            return function g                 console log i2                     i   1000       In the above program there are two functions  f and g  Let s see if they are closures   For f    List the variables    i2 is a local variable  g is a local variable  console is a free variable   Find the parent scope to which each free variable is bound    console is bound to the global scope   In which scope is the function referenced  The global scope    Hence console is not closed over by f     Thus the function f is not a closure   For g    List the variables    console is a free variable  i2 is a free variable   Find the parent scope to which each free variable is bound    console is bound to the global scope  i2 is bound to the scope of f   In which scope is the function referenced  The scope of setTimeout    Hence console is not closed over by g  Hence i2 is closed over by g     Thus the function g is a closure for the free variable i2  which is an upvalue for g  when it s referenced from within setTimeout   Good for you  You are using a closure  The inner function is a closure   So both you and your friend are using closures  Stop arguing  I hope I cleared the concept of closures and how to identify them for the both of you   Edit  A simple explanation as to why are all functions closures  credits  Peter    First let s consider the following program  it s the control     x000D   x000D  lexicalScope    x000D   x000D  function lexicalScope     x000D      var message    This is the control  You should be able to see this message being alerted    x000D   x000D      regularFunction    x000D   x000D      function regularFunction     x000D          alert eval  message     x000D        x000D    x000D   x000D   x000D     We know that both lexicalScope and regularFunction aren t closures from the above definition  When we execute the program we expect message to be alerted because regularFunction is not a closure  i e  it has access to all the variables in its parent scope - including message   When we execute the program we observe that message is indeed alerted    Next let s consider the following program  it s the alternative     x000D   x000D  var closureFunction   lexicalScope    x000D   x000D  closureFunction    x000D   x000D  function lexicalScope     x000D      var message    This is the alternative  If you see this message being alerted then in means that every function in JavaScript is a closure    x000D   x000D      return function closureFunction     x000D          alert eval  message     x000D         x000D    x000D   x000D   x000D     We know that only closureFunction is a closure from the above definition  When we execute the program we expect message not to be alerted because closureFunction is a closure  i e  it only has access to all its non-local variables at the time the function is created  see this answer  - this does not include message   When we execute the program we observe that message is actually being alerted    What do we infer from this    JavaScript interpreters do not treat closures differently from the way they treat other functions  Every function carries its scope chain along with it  Closures don t have a separate referencing environment  A closure is just like every other function  We just call them closures when they are referenced in a scope outside the scope to which they belong because this is an interesting case

User · Answer

I ve never been happy with the way anybody explains this   The key to understanding closures is to understand what JS would be like without closures   Without closures  this would throw an error  function outerFunc        var outerVar    an outerFunc var       return function            alert outerVar            outerFunc        returns inner function and fires it   Once outerFunc has returned in an imaginary closure-disabled version of JavaScript  the reference to outerVar would be garbage collected and gone leaving nothing there for the inner func to reference   Closures are essentially the special rules that kick in and make it possible for those vars to exist when an inner function references an outer function s variables  With closures the vars referenced are maintained even after the outer function is done or  closed  if that helps you remember the point   Even with closures  the life cycle of local vars in a function with no inner funcs that reference its locals works the same as it would in a closure-less version  When the function is finished  the locals get garbage collected   Once you have a reference in an inner func to an outer var  however it s like a doorjamb gets put in the way of garbage collection for those referenced vars   A perhaps more accurate way to look at closures  is that the inner function basically uses the inner scope as its own scope foudnation   But the context referenced is in fact  persistent  not like a snapshot  Repeatedly firing a returned inner function that keeps incrementing and logging an outer function s local var will keep alerting higher values   function outerFunc        var incrementMe   0      return function    incrementMe    console log incrementMe       var inc   outerFunc    inc      logs 1 inc      logs 2

User · Answer

Consider the following  This creates and recreates a function f that closes on i  but different ones    x000D   x000D  i 100  x000D   x000D  f function i  return function   return   i   0   x000D  alert  f f   f   f   f   f   f   f   f   f   f    join   n n     x000D   x000D  f function i  return new Function  return   i    0              function declarations    expressions     x000D  alert  f f   f   f   f   f   f   f   f   f   f    join   n n     x000D   x000D   x000D    while the following closes on  a  function  itself    themselves  the snippet after this uses a single referent f    x000D   x000D  for var i   0  i  lt  10  i      x000D      setTimeout  new Function  console log   i        1000    x000D    x000D   x000D   x000D    or to be more explicit    x000D   x000D  for var i   0  i  lt  10  i      x000D      console log     f   new Function   console log   i             x000D      setTimeout  f   1000    x000D    x000D   x000D   x000D    NB  the last  definition of f is function    console log 9    before 0 is printed   Caveat  The closure concept can be a coercive distraction from the essence of elementary programming    x000D   x000D  for var i   0  i  lt  10  i          setTimeout   console log   i       1000           x000D   x000D   x000D    x-refs   How do JavaScript closures work  Javascript Closures Explanation Does a  JS  Closure Require a Function Inside a Function How to understand closures in Javascript  Javascript local and global variable confusion

User · Answer

I would like to share my example and an explanation about closures  I made a python example  and two figures to demonstrate stack states   def maker a  b  n       margin top   2     padding   4     def message msg           print   n      margin top  a   n                       padding  msg          padding  b   n      return message  f   maker           5  g   maker             3      f  hello   g    good bye      The output of this code would be as follows              hello                      good bye           Here are two figures to show stacks and the closure attached to the function object   when the function is returned from maker  when the function is called later  When the function is called through a parameter or a nonlocal variable  the code needs local variable bindings such as margin top  padding as well as a  b  n  In order to ensure the function code to work  the stack frame of the maker function which was gone away long ago should be accessible  which is backed up in the closure we can find along with the function message object

User · Answer

You and your friend both use closures   A closure is a special kind of object that combines two things  a function  and the environment in which that function was created  The environment consists of any local variables that were in-scope at the time that the closure was created  MDN  https   developer mozilla org en-US docs JavaScript Guide Closures  In your friend s code function function    console log i2     defined inside closure of anonymous function function    var i2   i       and can read write local variable i2  In your code function function    console log i2     defined inside closure of function function i2   return     and can read write local valuable i2  declared in this case as a parameter   In both cases function function    console log i2     then passed into setTimeout  Another equivalent  but with less memory utilization  is  function fGenerator i2       return function            console log i2           for var i   0  i  lt  10  i          setTimeout fGenerator i   1000

User · Answer

Let s look at both ways    function        var i2   i      setTimeout function            console log i2          1000          Declares and immediately executes an anonymous function that runs setTimeout   within its own context  The current value of i is preserved by making a copy into i2 first  it works because of the immediate execution   setTimeout  function i2       return function             console log i2            i   1000     Declares an execution context for the inner function whereby the current value of i is preserved into i2  this approach also uses immediate execution to preserve the value   Important  It should be mentioned that the run semantics are NOT the same between both approaches  your inner function gets passed to setTimeout   whereas his inner function calls setTimeout   itself   Wrapping both codes inside another setTimeout   doesn t prove that only the second approach uses closures  there s just not the same thing to begin with   Conclusion  Both methods use closures  so it comes down to personal taste  the second approach is easier to  move  around or generalize

User · Answer

In a nutshell Javascript Closures allow a function to access a variable that is declared in a lexical-parent function   Let s see a more detailed explanation  To understand closures it is important to understand how JavaScript scopes variables   Scopes  In JavaScript scopes are defined with functions  Every function defines a new scope   Consider the following example   function f      begin of scope f   var foo  hello     foo is declared in scope f   for var i 0 i lt 2 i      i is declared in scope f        the for loop is not a function  therefore we are still in scope f      var bar    Am I accessible     bar is declared in scope f      console log foo         console log i     console log bar      end of scope f   calling f prints   hello hello 2 Am I Accessible    Let s now consider the case we have a function g defined within another function f   function f      begin of scope f   function g        being of scope g                  end of scope g              end of scope f   We will call f the lexical parent of g  As explained before we now have 2 scopes  the scope f and the scope g   But one scope is  within  the other scope  so is the scope of the child function part of the scope of the parent function  What happens with the variables declared in the scope of the parent function  will I be able to access them from the scope of the child function  That s exactly where closures step in   Closures  In JavaScript the function g can not only access any variables declared in scope g but also access any variables declared in the scope of the parent function f   Consider following   function f    lexical parent function    begin of scope f   var foo  hello     foo declared in scope f   function g        being of scope g     var bar  bla     bar declared in scope g     console log foo        end of scope g   g      console log bar      end of scope f   calling f prints  hello undefined   Let s look at the line console log foo    At this point we are in scope g and we try to access the variable foo that is declared in scope f  But as stated before we can access any variable declared in a lexical parent function which is the case here  g is the lexical parent of f  Therefore hello is printed  Let s now look at the line console log bar    At this point we are in scope f and we try to access the variable bar that is declared in scope g  bar is not declared in the current scope and the function g is not the parent of f  therefore bar is undefined  Actually we can also access the variables declared in the scope of a lexical  grand parent  function  Therefore if there would be a function h defined within the function g  function f      begin of scope f   function g        being of scope g     function h          being of scope h                      end of scope h                  end of scope g              end of scope f   then h would be able to access all the variables declared in the scope of function h  g  and f  This is done with closures  In JavaScript closures allows us to access any variable declared in the lexical parent function  in the lexical grand parent function  in the lexical grand-grand parent function  etc   This can be seen as a scope chain   scope of current function -  scope of lexical parent function -  scope of lexical grand parent function -       until the last parent function that has no lexical parent   The window object  Actually the chain doesn t stop at the last parent function  There is one more special scope  the global scope  Every variable not declared in a function is considered to be declared in the global scope  The global scope has two specialities    every variable declared in the global scope is accessible everywhere the variables declared in the global scope correspond to the properties of the window object    Therefore there are exactly two ways of declaring a variable foo in the global scope  either by not declaring it in a function or by setting the property foo of the window object   Both attempts uses closures  Now that you have read a more detailed explanation it may now be apparent that both solutions uses closures  But to be sure  let s make a proof   Let s create a new Programming Language  JavaScript-No-Closure  As the name suggests  JavaScript-No-Closure is identical to JavaScript except it doesn t support Closures   In other words   var foo    hello   function f   console log foo    f      JavaScript-No-Closure prints undefined   JavaSript prints hello   Alright  let s see what happens with the first solution with JavaScript-No-Closure   for var i   0  i  lt  10  i         function        var i2   i      setTimeout function            console log i2     i2 is undefined in JavaScript-No-Closure         1000              therefore this will print undefined 10 times in JavaScript-No-Closure   Hence the first solution uses closure   Let s look at the second solution   for var i   0  i  lt  10  i        setTimeout  function i2       return function             console log i2     i2 is undefined in JavaScript-No-Closure            i   1000       therefore this will print undefined 10 times in JavaScript-No-Closure   Both solutions uses closures   Edit  It is assumed that these 3 code snippets are not defined in the global scope  Otherwise the variables foo and i would be bind to the window object and therefore accessible through the window object in both JavaScript and JavaScript-No-Closure

User · Answer

You are both using closures   I  m going with the Wikipedia definition here      In computer science  a closure  also lexical closure or function   closure  is a function or reference to a function together with a   referencing environment   a table storing a reference to each of the   non-local variables  also called free variables  of that function    A closure   unlike a plain function pointer   allows a function to access   those non-local variables even when invoked outside of its immediate   lexical scope    Your friend s attempt clearly uses the variable i  which is non-local  by taking its value and making a copy to store into the local i2   Your own attempt passes i  which at the call site is in scope  to an anonymous function as an argument  This is not a closure so far  but then that function returns another function that references the same i2  Since inside the inner anonymous function i2 is not a local  this creates a closure

User · Answer

According to the closure definition      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     You are using closure if you define a function which use a variable which is defined outside of the function   we call the variable a free variable   They all use closure even in the 1st example

[javascript] JavaScript closures vs. anonymous functions

Examples related to javascript

Examples related to scope

Examples related to closures