JavaScript closure inside loops simple practical example

Question

x000D   x000D  var funcs          let s create 3 functions for  var i   0  i  lt  3  i           and store them in funcs   funcs i    function            each should log its value      console log  My value      i          for  var j   0  j  lt  3  j           and now let s run each one to see   funcs j       x000D   x000D   x000D   It outputs this   My value  3 My value  3 My value  3  Whereas I d like it to output   My value  0 My value  1 My value  2   The same problem occurs when the delay in running the function is caused by using event listeners   x000D   x000D  var buttons   document getElementsByTagName  button       let s create 3 functions for  var i   0  i  lt  buttons length  i           as event listeners   buttons i  addEventListener  click   function            each should log its value      console log  My value      i           x000D   lt button gt 0 lt  button gt   lt br   gt   lt button gt 1 lt  button gt   lt br   gt   lt button gt 2 lt  button gt  x000D   x000D   x000D       or asynchronous code  e g  using Promises   x000D   x000D     Some async wait function const wait    ms    gt  new Promise  resolve  reject    gt  setTimeout resolve  ms     for  var i   0  i  lt  3  i           Log  i  as soon as each promise resolves    wait i   100  then      gt  console log i      x000D   x000D   x000D   It is also apparent in for in and for of loops   x000D   x000D  const arr    1 2 3   const fns        for var i in arr     fns push      gt  console log  index    i         for var v of arr     fns push      gt  console log  value    v         for var f of fns     f      x000D   x000D   x000D   What   s the solution to this basic problem

User · Answer

I prefer to use forEach function  which has its own closure with creating a pseudo range   var funcs        new Array 3  fill 0  forEach function     i       creating a range     funcs i    function                            now i is safely incapsulated          console log  My value      i               for  var j   0  j  lt  3  j          funcs j        0  1  2     That looks uglier than ranges in other languages  but IMHO less monstrous than other solutions

User · Answer

With the support of ES6  the best way to this is to use let and const keywords for this exact circumstance  So var variable get hoisted and with the end of loop the value of i gets updated for all the closures     we can just use let to set a loop scope variable like this   var funcs       for  let i   0  i  lt  3  i                    funcs i    function                       console log  My value      i

User · Answer

With new features of ES6 block level scoping is managed   var funcs       for  let i   0  i  lt  3  i                  let s create 3 functions     funcs i    function                   and store them in funcs         console log  My value      i      each should log its value           for  let j   0  j  lt  3  j          funcs j                               and now let s run each one to see     The code in OP s question is replaced with let instead of var

User · Answer

var funcs       for  var i   0  i  lt  3  i              let s create 3 functions   funcs i    function param                and store them in funcs     console log  My value      param      each should log its value         for  var j   0  j  lt  3  j        funcs j  j                           and now let s run each one to see with j

User · Answer

The most simple solution would be   Instead of using   var funcs       for var i  0  i lt 3  i         funcs i    function            alert i            for var j  0  j lt 3  j         funcs j         which alerts  2   for 3 times  This is because anonymous functions created in for loop  shares same closure  and in that closure  the value of i is the same  Use this to prevent shared closure   var funcs       for var new i  0  new i lt 3  new i          function i           funcs i    function                alert i                    new i      for var j  0  j lt 3  j         funcs j         The idea behind this is  encapsulating the entire body of the for loop with an IIFE  Immediately-Invoked Function Expression  and passing new i as a parameter and capturing it as i  Since the anonymous function is executed immediately  the i value is different for each function defined inside the anonymous function   This solution seems to fit any such problem since it will require minimal changes to the original code suffering from this issue  In fact  this is by design  it should not be an issue at all

User · Answer

JavaScript functions  close over  the scope they have access to upon declaration  and retain access to that scope even as variables in that scope change    x000D   x000D  var funcs      x000D   x000D  for  var i   0  i  lt  3  i    1    x000D    funcs i    function      x000D      console log i  x000D      x000D    x000D   x000D  for  var k   0  k  lt  3  k    1    x000D    funcs k    x000D    x000D   x000D   x000D    Each function in the array above closes over the global scope  global  simply because that happens to be the scope they re declared in    Later those functions are invoked logging the most current value of i in the global scope  That s the magic  and frustration  of closure    JavaScript Functions close over the scope they are declared in  and retain access to that scope even as variable values inside of that scope change    Using let instead of var solves this by creating a new scope each time the for loop runs  creating a separated scope for each function to close over  Various other techniques do the same thing with extra functions    x000D   x000D  var funcs      x000D   x000D  for  let i   0  i  lt  3  i    1    x000D    funcs i    function      x000D      console log i  x000D      x000D    x000D   x000D  for  var k   0  k  lt  3  k    1    x000D    funcs k    x000D    x000D   x000D   x000D     let makes variables block scoped  Blocks are denoted by curly braces  but in the case of the for loop the initialization variable  i in our case  is considered to be declared in the braces

User · Answer

After reading through various solutions  I d like to add that the reason those solutions work is to rely on the concept of scope chain  It s the way JavaScript resolve a variable during execution      Each function definition forms a scope consisting of all the local  variables declared by var and its arguments     If we have inner function defined inside another  outer  function  this  forms a chain  and will be used during execution    When a function gets executed  the runtime evaluates variables by searching the scope chain  If a variable can be found in a certain point of the chain it will stop searching and use it  otherwise it continues until the global scope reached which belongs to window    In the initial code   funcs       for  var i   0  i  lt  3  i                 funcs i    function inner               function inner s scope contains nothing     console log  My value      i              console log window i                      test value  i   print 3   When funcs gets executed  the scope chain will be function inner - gt  global  Since the variable i cannot be found in function inner  neither declared using var nor passed as arguments   it continues to search  until the value of i is eventually found in the global scope which is window i   By wrapping it in an outer function either explicitly define a helper function like harto did or use an anonymous function like Bjorn did   funcs       function outer i                    function outer s scope contains  i    return function inner             function inner  closure created    console log  My value      i          for  var i   0  i  lt  3  i        funcs i    outer i     console log window i              print 3 still   When funcs gets executed  now the scope chain will be function inner - gt  function outer  This time i can be found in the outer function s scope which is executed 3 times in the for loop  each time has value i bound correctly  It won t use the value of window i when inner executed   More detail can be found here It includes the common mistake in creating closure in the loop as what we have here  as well as why we need closure and the performance consideration

User · Answer

While this question is old and answered   I have yet another fairly interesting solution   var funcs        for  var i   0  i  lt  3  i             funcs i    function                   console log  My value      i           for  var i   0  i  lt  3  i        funcs i         The change is so small it s almost difficult to see what I did  I switched the second iterator from a j to an i  This somehow refreshes the state of i in time to give you the desired result  I did this by accident but it makes sense considering previous answers   I wrote this up to point out this small  yet very important difference  Hope that helps to clear up some confusion for other learners like me   Note  I am not sharing this because I think it s the right answer  This is a flakey solution that probably will break under certain circumstances  Actually  I m quite amazed that it really works

User · Answer

And yet another solution  instead of creating another loop  just bind the this to the return function    x000D   x000D  var funcs       x000D   x000D  function createFunc i    x000D    return function     x000D      console log  My value      i     log value of i  x000D      call this   x000D    x000D   x000D  for  var i   1  i  lt   5  i         5 functions x000D    funcs i    createFunc i          call createFunc   i 5 times x000D    x000D   x000D   x000D    By binding this  solves the problem as well

User · Answer

Let s say you don t use es6  You can use IFFY function   var funcs       for  var i   0  i  lt  13  i            funcs i     function x    console log  My value      i    i      But it will be different

User · Answer

COUNTER BEING A PRIMITIVE  Let s define callback functions as follows                                      COUNTER BEING A PRIMITIVE                                 function test1         for  var i 0  i lt 2  i              setTimeout function                 console log i                       test1       2    2   After timeout completes it will print 2 for both  This is because the callback function accesses the value based on the lexical scope  where it was function was defined   To pass and preserve the value while callback was defined  we can create a closure  to preserve the value before the callback is invoked  This can be done as follows   function test2         function sendRequest i            setTimeout function                 console log i                          for  var i   0  i  lt  2  i              sendRequest i           test2       1    2   Now what s special about this is  The primitives are passed by value and copied  Thus when the closure is defined  they keep the value from the previous loop    COUNTER BEING AN OBJECT  Since closures have access to parent function variables via reference  this approach would differ from that for primitives                                      COUNTER BEING AN OBJECT                                 function test3         var index     i  0        for  index i 0  index i lt 2  index i              setTimeout function                 console log  test3      index i                       test3       2    2   So  even if a closure is created for the variable being passed as an object  the value of the loop index will not be preserved  This is to show that the values of an object are not copied whereas they are accessed via reference   function test4         var index     i  0        function sendRequest index  i            setTimeout function                 console log  index      index               console log  i      i               console log index i                           for  index i 0  index i lt 2  index i              sendRequest index  index i           test4       index    i  2     0    undefined     index    i  2     1    undefined

User · Answer

Another way that hasn t been mentioned yet is the use of Function prototype bind   x000D   x000D  var funcs       x000D  for  var i   0  i  lt  3  i      x000D    funcs i    function x    x000D      console log  My value      x   x000D      bind this  i   x000D    x000D  for  var j   0  j  lt  3  j      x000D    funcs j     x000D    x000D   x000D   x000D    UPDATE  As pointed out by  squint and  mekdev  you get better performance by creating the function outside the loop first and then binding the results within the loop    x000D   x000D  function log x    x000D    console log  My value      x   x000D    x000D   x000D  var funcs       x000D   x000D  for  var i   0  i  lt  3  i      x000D    funcs i    log bind this  i   x000D    x000D   x000D  for  var j   0  j  lt  3  j      x000D    funcs j     x000D    x000D   x000D   x000D

User · Answer

The main issue with the code shown by the OP is that i is never read until the second loop  To demonstrate  imagine seeing an error inside of the code  funcs i    function                   and store them in funcs     throw new Error  test        console log  My value      i      each should log its value       The error actually does not occur until funcs someIndex  is executed     Using this same logic  it should be apparent that the value of i is also not collected until this point either  Once the original loop finishes  i   brings i to the value of 3 which results in the condition i  lt  3 failing and the loop ending  At this point  i is 3 and so when funcs someIndex    is used  and i is evaluated  it is 3 - every time   To get past this  you must evaluate i as it is encountered  Note that this has already happened in the form of funcs i   where there are 3 unique indexes   There are several ways to capture this value  One is to pass it in as a parameter to a function which is shown in several ways already here    Another option is to construct a function object which will be able to close over the variable  That can be accomplished thusly  jsFiddle Demo  funcs i    new function            var closedVariable   i      return function            console log  My value      closedVariable

User · Answer

The reason your original example did not work is that all the closures you created in the loop referenced the same frame  In effect  having 3 methods on one object with only a single i variable  They all printed out the same value

User · Answer

Using an Immediately-Invoked Function Expression  the simplest and most readable way to enclose an index variable    x000D   x000D  for  var i   0  i  lt  3  i      x000D   x000D       function index    x000D   x000D          console log  iterator      index   x000D            now you can also loop an ajax call here  x000D            without losing track of the iterator value      ajax      x000D       x000D         i   x000D   x000D    x000D   x000D   x000D    This sends the iterator i into the anonymous function of which we define as index   This creates a closure  where the variable i gets saved for later use in any asynchronous functionality within the IIFE

User · Answer

Already many valid answers to this question  Not many using a functional approach though  Here is an alternative solution using the forEach method  which works well with callbacks and closures   let arr    1 2 3    let myFunc    val  index    gt         console log  val    val   nindex    index       arr forEach myFunc

User · Answer

Here s another variation on the technique  similar to Bjorn s  apphacker   which lets you assign the variable value inside the function rather than passing it as a parameter  which might be clearer sometimes    x000D   x000D  var funcs       x000D  for  var i   0  i  lt  3  i      x000D      funcs i     function     x000D          var index   i  x000D          return function     x000D              console log  My value      index   x000D            x000D            x000D    x000D   x000D   x000D    Note that whatever technique you use  the index variable becomes a sort of static variable  bound to the returned copy of the inner function  I e   changes to its value are preserved between calls  It can be very handy

User · Answer

Here s a simple solution that uses forEach  works back to IE9     x000D   x000D  var funcs       x000D   0 1 2  forEach function i                let s create 3 functions x000D      funcs i    function                   and store them in funcs x000D          console log  My value      i      each should log its value  x000D         x000D     x000D  for  var j   0  j  lt  3  j      x000D      funcs j                               and now let s run each one to see x000D    x000D   x000D   x000D    Prints    My value  0 My value  1 My value  2

User · Answer

I m surprised no one yet has suggested using the forEach function to better avoid  re using local variables  In fact  I m not using for var i      at all anymore for this reason    0 2 3  forEach function i   console log  My value    i          My value  0    My value  2    My value  3      edited to use forEach instead of map

User · Answer

Well  the problem is that the variable i  within each of your anonymous functions  is bound to the same variable outside of the function  ES6 solution  let ECMAScript 6  ES6  introduces new let and const keywords that are scoped differently than var-based variables  For example  in a loop with a let-based index  each iteration through the loop will have a new variable i with loop scope  so your code would work as you expect  There are many resources  but I d recommend 2ality s block-scoping post as a great source of information  for  let i   0  i  lt  3  i        funcs i    function         console log  quot My value   quot    i           Beware  though  that IE9-IE11 and Edge prior to Edge 14 support let but get the above wrong  they don t create a new i each time  so all the functions above would log 3 like they would if we used var   Edge 14 finally gets it right   ES5 1 solution  forEach With the relatively widespread availability of the Array prototype forEach function  in 2015   it s worth noting that in those situations involving iteration primarily over an array of values   forEach   provides a clean  natural way to get a distinct closure for every iteration  That is  assuming you ve got some sort of array containing values  DOM references  objects  whatever   and the problem arises of setting up callbacks specific to each element  you can do this  var someArray        whatever              someArray forEach function arrayElement             code code code for this one element   someAsynchronousFunction arrayElement  function         arrayElement doSomething               The idea is that each invocation of the callback function used with the  forEach loop will be its own closure  The parameter passed in to that handler is the array element specific to that particular step of the iteration  If it s used in an asynchronous callback  it won t collide with any of the other callbacks established at other steps of the iteration  If you happen to be working in jQuery  the   each   function gives you a similar capability   Classic solution  Closures What you want to do is bind the variable within each function to a separate  unchanging value outside of the function   x000D   x000D  var funcs        function createfunc i      return function         console log  My value      i           for  var i   0  i  lt  3  i        funcs i    createfunc i      for  var j   0  j  lt  3  j           and now let s run each one to see   funcs j       x000D   x000D   x000D   Since there is no block scope in JavaScript - only function scope - by wrapping the function creation in a new function  you ensure that the value of  quot i quot  remains as you intended

User · Answer

What you need to understand is the scope of the variables in javascript is based on the function  This is an important difference than say c  where you have block scope  and just copying the variable to one inside the for will work   Wrapping it in a function that evaluates returning the function like apphacker s answer will do the trick  as the variable now has the function scope   There is also a let keyword instead of var  that would allow using the block scope rule  In that case defining a variable inside the for would do the trick  That said  the let keyword isn t a practical solution because of compatibility    x000D   x000D  var funcs       x000D   x000D  for  var i   0  i  lt  3  i      x000D    let index   i    add this x000D    funcs i    function     x000D      console log  My value      index     change to the copy x000D       x000D    x000D   x000D  for  var j   0  j  lt  3  j      x000D    funcs j     x000D    x000D   x000D   x000D

User · Answer

asyncIterable    1 2 3 4 5 6 7 8       async function            for await  let num of asyncIterable             console log num

User · Answer

This question really shows the history of JavaScript  Now we can avoid block scoping with arrow functions and handle loops directly from DOM nodes using Object methods    x000D   x000D  const funcs    1  2  3  map i   gt       gt  console log i    x000D  funcs map fn   gt  fn    x000D   x000D   x000D     x000D   x000D  const buttons   document getElementsByTagName  button    x000D  Object x000D     keys buttons  x000D     map i   gt  buttons i  addEventListener  click        gt  console log i     x000D   lt button gt 0 lt  button gt  lt br gt  x000D   lt button gt 1 lt  button gt  lt br gt  x000D   lt button gt 2 lt  button gt  x000D   x000D   x000D

User · Answer

If you re having this sort of problem with a while loop  rather than a for loop  for example   x000D   x000D  var i   0  while  i  lt  5      setTimeout function         console log i        i   1000     i      x000D   x000D   x000D   The technique to close over the current value is a bit different  Declare a block-scoped variable with const inside the while block  and assign the current i to it  Then  wherever the variable is being used asynchronously  replace i with the new block-scoped variable   x000D   x000D  var i   0  while  i  lt  5      const thisIterationI   i    setTimeout function         console log thisIterationI        i   1000     i      x000D   x000D   x000D   For older browsers that don t support block-scoped variables  you can use an IIFE called with i   x000D   x000D  var i   0  while  i  lt  5       function innerI        setTimeout function           console log innerI          innerI   1000        i     i      x000D   x000D   x000D   If the asynchronous action to be invoked happens to be setTimeout like the above  you can also call setTimeout with a third parameter to indicate the argument to call the passed function with   x000D   x000D  var i   0  while  i  lt  5      setTimeout       thisIterationI    gt       Callback       console log thisIterationI              i   1000     Delay     i    Gets passed to the callback  becomes thisIterationI        i      x000D   x000D   x000D

User · Answer

Till ES5  This problem can only be solved using closure   But now in ES6  we have block level scope variables  Changing var to let in first for loop will solve the problem    x000D   x000D  var funcs       x000D  for  let i   0  i  lt  3  i              let s create 3 functions x000D    funcs i    function                 and store them in funcs x000D      console log  My value      i      each should log its value  x000D       x000D    x000D  for  var j   0  j  lt  3  j      x000D    funcs j                             and now let s run each one to see x000D    x000D   x000D   x000D

User · Answer

Just change the var keyword to let    var is function scoped   let is block scoped   When you start you code the for loop will iterate and assign the value of i to 3  which will remain 3 throughout your code  I suggest you to read more about scopes in node  let var const and others   funcs       for  let i   0  i  lt  3  i              let s create 3 functions   funcs i   async function                 and store them in funcs     await console log  My value      i      each should log its value         for  var j   0  j  lt  3  j        funcs j                             and now let s run each one to see

User · Answer

Use closure structure  this would reduce your extra for loop  You can do it in a single for loop   var funcs       for  var i   0  i  lt  3  i              funcs i    function                  console log  My value      i         i

User · Answer

First of all  understand what s wrong with this code   var funcs       for  var i   0  i  lt  3  i                  let s create 3 functions     funcs i    function                   and store them in funcs         console log  My value      i      each should log its value           for  var j   0  j  lt  3  j          funcs j                               and now let s run each one to see     Here when the funcs   array is being initialized  i is being incremented  the funcs array is initialized and the size of func array becomes 3   so i   3    Now when the funcs j    is called  it is again using the variable i  which has already been incremented to 3   Now to solve this  we have many options  Below are two of them    We can initialize i with let or initialize a new variable index with let and make it equal to i  So when the call is being made  index will be used and its scope will end after initialization  And for calling  index will be initialized again   var funcs       for  var i   0  i  lt  3  i                    let index   i      funcs i    function                         console log  My value      index             for  var j   0  j  lt  3  j          funcs j                                Other Option can be to introduce a tempFunc which returns the actual function   var funcs       function tempFunc i       return function            console log  My value      i            for  var i   0  i  lt  3  i            funcs i    tempFunc i                                          for  var j   0  j  lt  3  j          funcs j

User · Answer

try this shorter one   no array no extra for loop     for  var i   0  i  lt  3  i          createfunc i        function createfunc i        return function   console log  My value      i         http   jsfiddle net 7P6EN

User · Answer

This proves how ugly javascript is with regard to how  closure  and  non-closure  works   In the case of   var funcs        for  var i   0  i  lt  3  i              let s create 3 functions   funcs i    function                 and store them in funcs     console log  My value      i      each should log its value           funcs i  is a global function  and  console log  My value      i    is printing global variable i  In the case of   var funcs        function createfunc i        return function     console log  My value      i         for  var i   0  i  lt  3  i          funcs i    createfunc i       because of this twisted closure design of javascript   console log  My value      i    is printing the i from outer function  createfunc i    all because javascript can not design something decent like the  static  variable inside a function like what C programming language is doing

User · Answer

This describes the common mistake with using closures in JavaScript   A function defines a new environment  Consider   function makeCounter       var obj    counter  0     return       inc  function   obj counter           get  function   return obj counter           counter1   makeCounter    counter2   makeCounter     counter1 inc     alert counter1 get        returns 1 alert counter2 get        returns 0   For each time makeCounter is invoked   counter  0  results in a new object being created  Also  a new copy of obj  is created as well to reference the new object  Thus  counter1 and counter2 are independent of each other   Closures in loops  Using a closure in a loop is tricky   Consider    var counters        function makeCounters num      for  var i   0  i  lt  num  i            var obj    counter  0       counters i            inc  function   obj counter            get  function   return obj counter                  makeCounters 2    counters 0  inc     alert counters 0  get        returns 1 alert counters 1  get        returns 1   Notice that counters 0  and counters 1  are not independent  In fact  they operate on the same obj   This is because there is only one copy of obj shared across all iterations of the loop  perhaps for performance reasons  Even though  counter  0  creates a new object in each iteration  the same copy of obj will just get updated with a reference to the newest object   Solution is to use another helper function   function makeHelper obj      return       inc  function   obj counter          get  function   return obj counter            function makeCounters num      for  var i   0  i  lt  num  i            var obj    counter  0       counters i    makeHelper obj           This works because local variables in the function scope directly  as well as function argument variables  are allocated  new copies upon entry

User · Answer

Why not simply call each function inside the first  and only  loop just after they were created  such as    var funcs           for  var i   0  i  lt  3  i             let s create 3 functions     funcs i    function            and store them in funcs     console log  My value      i      each should log its value             funcs i       and now let s run each one to see

User · Answer

Let s take advantage of new Function  Thus i stops to be a variable of a closure and becomes just a part of the text   var funcs       for  var i   0  i  lt  3  i          var functionBody    console log  My value      i              funcs i    new Function functionBody      for  var j   0  j  lt  3  j          funcs j

User · Answer

Your code doesn t work  because what it does is   Create variable  funcs  and assign it an empty array    Loop from 0 up until it is less than 3 and assign it to variable  i       Push to variable  funcs  next function               Only push  save   but don t execute           Write to console current value of variable  i         First loop has ended  i   3   Loop from 0 up until it is less than 3 and assign it to variable  j       Call  j -th function from variable  funcs               Write to console current value of variable  i                  Ask yourself NOW  What is the value of i    Now the question is  what is the value of variable i when the function is called  Because the first loop is created with the condition of i  lt  3  it stops immediately when the condition is false  so it is i   3    You need to understand that  in time when your functions are created  none of their code is executed  it is only saved for later  And so when they are called later  the interpreter executes them and asks   What is the current value of i    So  your goal is to first save the value of i to function and only after that save the function to funcs  This could be done for example this way   var funcs       for  var i   0  i  lt  3  i                  let s create 3 functions     funcs i    function x                  and store them in funcs         console log  My value      x      each should log its value        bind null  i     for  var j   0  j  lt  3  j          funcs j                               and now let s run each one to see     This way  each function will have it s own variable x and we set this x to the value of i in each iteration   This is only one of the multiple ways to solve this problem

User · Answer

Use let blocked-scope  instead of var    x000D   x000D  var funcs       x000D  for  let i   0  i  lt  3  i            x000D    funcs i    function               x000D      console log  My value      i    x000D       x000D    x000D  for  var j   0  j  lt  3  j      x000D    funcs j                           x000D    x000D   x000D   x000D

User · Answer

This is a problem often encountered with asynchronous code  the variable i is mutable and at the time at which the function call is made the code using i will be executed and i will have mutated to its last value  thus meaning all functions created within the loop will create a closure and i will be equal to 3  the upper bound   1 of the for loop   A workaround to this  is to create a function that will hold the value of i for each iteration and force a copy i  as it is a primitive  think of it as a snapshot if it helps you

User · Answer

We will check   what actually happens when you declare var and let   one by one    Case1   using var   lt script gt     var funcs          for  var i   0  i  lt  3  i           funcs i    function              debugger          console log  My value      i                   console log funcs    lt  script gt    Now open your chrome console window by pressing F12 and refresh the page  Expend every 3 functions inside the array You will see an property called   Scopes   Expand that one  You will see one  array object called  Global  expand that one  You will find a property  i  declared into the object which having value 3       Conclusion     When you declare a variable using  var  outside a function  it becomes global variable you can check by typing i or  window i in console window It will return 3   The annominous function you declared will not call and check the value inside the function unless you invoke the  functions  When you invoke the function   console log  My value      i  takes the value from its Global object and display the  result    CASE2   using let  Now replace the  var  with  let    lt script gt      var funcs           for  let i   0  i  lt  3  i              funcs i    function                 debugger             console log  My value      i                        console log funcs    lt  script gt    Do the same thing  Go to the scopes   Now you will see two objects  Block  and  Global   Now expand Block object   you  will see  i  is defined there   and the strange thing is that   for every functions   the value if i is different  0   1  2       Conclusion   When you declare variable using  let  even outside the function but inside the loop   this variable will not be a Global  variable   it will become a Block level variable which is only available for the same function only That is the reason   we  are getting value of i different for each function when we invoke the functions   For more detail about how closer works   please go through the awesome video tutorial https   youtu be 71AtaJpJHw0

User · Answer

Bit late to the party  but I was exploring this issue today and noticed that many of the answers don t completely address how Javascript treats scopes  which is essentially what this boils down to  So as many others mentioned  the problem is that the inner function is referencing the same i variable  So why don t we just create a new local variable each iteration  and have the inner function reference that instead   x000D   x000D    overwrite console log   so you can see the console output console log   function msg   document body innerHTML      lt p gt     msg     lt  p gt       var funcs       for  var i   0  i  lt  3  i          var ilocal   i    create a new local variable     funcs i    function             console log  My value      ilocal     each should reference its own local variable          for  var j   0  j  lt  3  j          funcs j       x000D   x000D   x000D   Just like before  where each inner function outputted the last value assigned to i  now each inner function just outputs the last value assigned to ilocal  But shouldn t each iteration have it s own ilocal  Turns out  that s the issue  Each iteration is sharing the same scope  so every iteration after the first is just overwriting ilocal  From MDN   Important  JavaScript does not have block scope  Variables introduced with a block are scoped to the containing function or script  and the effects of setting them persist beyond the block itself  In other words  block statements do not introduce a scope  Although  quot standalone quot  blocks are valid syntax  you do not want to use standalone blocks in JavaScript  because they don t do what you think they do  if you think they do anything like such blocks in C or Java   Reiterated for emphasis   JavaScript does not have block scope  Variables introduced with a block are scoped to the containing function or script  We can see this by checking ilocal before we declare it in each iteration   x000D   x000D    overwrite console log   so you can see the console output console log   function msg   document body innerHTML      lt p gt     msg     lt  p gt       var funcs       for  var i   0  i  lt  3  i        console log ilocal     var ilocal   i    x000D   x000D   x000D   This is exactly why this bug is so tricky  Even though you are redeclaring a variable  Javascript won t throw an error  and JSLint won t even throw a warning  This is also why the best way to solve this is to take advantage of closures  which is essentially the idea that in Javascript  inner functions have access to outer variables because inner scopes  quot enclose quot  outer scopes   This also means that inner functions  quot hold onto quot  outer variables and keep them alive  even if the outer function returns  To utilize this  we create and call a wrapper function purely to make a new scope  declare ilocal in the new scope  and return an inner function that uses ilocal  more explanation below    x000D   x000D    overwrite console log   so you can see the console output console log   function msg   document body innerHTML      lt p gt     msg     lt  p gt       var funcs       for  var i   0  i  lt  3  i          funcs i     function       create a new scope using a wrapper function         var ilocal   i    capture i into a local var         return function       return the inner function             console log  My value      ilocal                          remember to run the wrapper function   for  var j   0  j  lt  3  j          funcs j       x000D   x000D   x000D   Creating the inner function inside a wrapper function gives the inner function a private environment that only it can access  a  quot closure quot   Thus  every time we call the wrapper function we create a new inner function with it s own separate environment  ensuring that the ilocal variables don t collide and overwrite each other  A few minor optimizations gives the final answer that many other SO users gave   x000D   x000D    overwrite console log   so you can see the console output console log   function msg   document body innerHTML      lt p gt     msg     lt  p gt       var funcs       for  var i   0  i  lt  3  i          funcs i    wrapper i     for  var j   0  j  lt  3  j          funcs j         creates a separate environment for the inner function function wrapper ilocal        return function       return the inner function         console log  My value      ilocal            x000D   x000D   x000D   Update With ES6 now mainstream  we can now use the new let keyword to create block-scoped variables   x000D   x000D    overwrite console log   so you can see the console output console log   function msg   document body innerHTML      lt p gt     msg     lt  p gt       var funcs       for  let i   0  i  lt  3  i         use  let  to declare  i      funcs i    function             console log  My value      i     each should reference its own local variable          for  var j   0  j  lt  3  j         we can use  var  here without issue     funcs j       x000D   x000D   x000D   Look how easy it is now  For more information see this answer  which my info is based off of

User · Answer

You could use a declarative module for lists of data such as query-js     In these situations I personally find a declarative approach less surprising  var funcs   Query range 0 3  each function i        return  function             console log  My value      i                You could then use your second loop and get the expected result or you could do   funcs iterate function f   f              I m the author of query-js and therefor biased towards using it  so don t take my words as a recommendation for said library only for the declarative approach

User · Answer

With ES6 now widely supported  the best answer to this question has changed   ES6 provides the let and const keywords for this exact circumstance   Instead of messing around with closures  we can just use let to set a loop scope variable like this    x000D   x000D  var funcs       x000D   x000D  for  let i   0  i  lt  3  i                x000D      funcs i    function                 x000D        console log  My value      i    x000D         x000D    x000D   x000D   x000D    val will then point to an object that is specific to that particular turn of the loop  and will return the correct value without the additional closure notation   This obviously significantly simplifies this problem   const is similar to let with the additional restriction that the variable name can t be rebound to a new reference after initial assignment   Browser support is now here for those targeting the latest versions of browsers  const let are currently supported in the latest Firefox  Safari  Edge and Chrome  It also is supported in Node  and you can use it anywhere by taking advantage of build tools like Babel   You can see a working example here  http   jsfiddle net ben336 rbU4t 2   Docs here    const let   Beware  though  that IE9-IE11 and Edge prior to Edge 14 support let but get the above wrong  they don t create a new i each time  so all the functions above would log 3 like they would if we used var   Edge 14 finally gets it right

User · Answer

Another way of saying it is that the i in your function is bound at the time of executing the function  not the time of creating the function   When you create the closure  i is a reference to the variable defined in the outside scope  not a copy of it as it was when you created the closure  It will be evaluated at the time of execution   Most of the other answers provide ways to work around by creating another variable that won t change the value for you   Just thought I d add an explanation for clarity  For a solution  personally  I d go with Harto s since it is the most self-explanatory way of doing it from the answers here  Any of the code posted will work  but I d opt for a closure factory over having to write a pile of comments to explain why I m declaring a new variable Freddy and 1800 s  or have weird embedded closure syntax apphacker

User · Answer

Try    x000D   x000D  var funcs       x000D       x000D  for  var i   0  i  lt  3  i      x000D      funcs i     function index    x000D          return function     x000D              console log  My value      index   x000D             x000D        i    x000D    x000D   x000D  for  var j   0  j  lt  3  j      x000D      funcs j     x000D    x000D   x000D   x000D    Edit  2014    Personally I think  Aust s more recent answer about using  bind is the best way to do this kind of thing now  There s also lo-dash underscore s   partial when you don t need or want to mess with bind s thisArg

User · Answer

Many solutions seem correct but they don t mention it s called Currying which is a functional programming design pattern for situations like here  3-10 times faster than bind depending on the browser   var funcs       for  var i   0  i  lt  3  i              let s create 3 functions   funcs i    curryShowValue i     for  var j   0  j  lt  3  j        funcs j                             and now let s run each one to see    function curryShowValue i      return function showValue         console log  My value      i           See the performance gain in different browsers

User · Answer

Ok  I read through all of the answers  Even though there is a good explanation here - I just could not get this to work  So I went looking on the internet  The person at https   dzone com articles why-does-javascript-loop-only-use-last-value had an answer which is not presented here  So I thought I d post a short example  This made a lot more sense to me   The long and short of it is that the LET command is nice but is only now being used  HOWEVER  the LET command is really just a TRY-CATCH combo  This works all the way back to IE3  I believe   Using the TRY-CATCH combo - life is simple and good  Probably why the EMCScript people decided to use it  It also does not need a setTimeout   function  So no time is lost  Basically  you need one TRY-CATCH combo per FOR loop  Here is an example       for  var i in myArray           try  throw i          catch ii      Do whatever it is you want to do with ii                        If you have more than one FOR loop  you just put a TRY-CATCH combo for each one  Also  personally  I always use the double letter of whatever FOR variable I am using  So  ii  for  i  and so on  I am using this technique in a routine to send mouseover commands to a different routine

[javascript] JavaScript closure inside loops – simple practical example

Examples related to javascript

Examples related to loops

Examples related to closures