{"id":90,"date":"2009-04-02T12:08:04","date_gmt":"2009-04-02T11:08:04","guid":{"rendered":"http:\/\/blogs.igalia.com\/eocanha\/?p=88"},"modified":"2015-11-08T00:21:03","modified_gmt":"2015-11-07T23:21:03","slug":"curiosities-about-using-closures-in-loops-in-javascript","status":"publish","type":"post","link":"https:\/\/eocanha.org\/blog\/2009\/04\/02\/curiosities-about-using-closures-in-loops-in-javascript\/","title":{"rendered":"Curiosities about using closures in loops in Javascript"},"content":{"rendered":"

Just execute this code<\/a> in your browser and find the ten differences between the two loops:<\/p>\n

\n
    \n
  1. \n
    <html><\/div>\n<\/li>\n
  2. \n
    <body><\/div>\n<\/li>\n
  3. \n
    <script type="application\/javascript;version=1.7"<\/span>><\/div>\n<\/li>\n
  4. \n
     <\/div>\n<\/li>\n
  5. \n
    let funs = {<\/span>}<\/span>;<\/div>\n<\/li>\n
  6. \n
    let msg = ""<\/span>;<\/div>\n<\/li>\n
  7. \n
     <\/div>\n<\/li>\n
  8. \n
    for<\/span> (<\/span>let i = 0<\/span>; i < 10<\/span>; i++)<\/span> {<\/span><\/div>\n<\/li>\n
  9. \n
      funs[<\/span>i]<\/span> = function<\/span>(<\/span>)<\/span> {<\/span><\/div>\n<\/li>\n
  10. \n
        msg += "i = "<\/span> + i + "n<\/span>"<\/span>;<\/div>\n<\/li>\n
  11. \n
      }<\/span><\/div>\n<\/li>\n
  12. \n
    }<\/span><\/div>\n<\/li>\n
  13. \n
     <\/div>\n<\/li>\n
  14. \n
    for<\/span> (<\/span>let i = 0<\/span>; i < 10<\/span>; i++)<\/span> funs[<\/span>i]<\/span>(<\/span>)<\/span>;<\/div>\n<\/li>\n
  15. \n
     <\/div>\n<\/li>\n
  16. \n
    alert<\/span>(<\/span>"Without redeclaration: n<\/span>"<\/span>+msg)<\/span>;<\/div>\n<\/li>\n
  17. \n
     <\/div>\n<\/li>\n
  18. \n
    msg = ""<\/span>;<\/div>\n<\/li>\n
  19. \n
    for<\/span> (<\/span>let i = 0<\/span>; i < 10<\/span>; i++)<\/span> {<\/span><\/div>\n<\/li>\n
  20. \n
      let idx = i;<\/div>\n<\/li>\n
  21. \n
      funs[<\/span>i]<\/span> = function<\/span>(<\/span>)<\/span> {<\/span><\/div>\n<\/li>\n
  22. \n
        msg += "i = "<\/span> + idx + "n<\/span>"<\/span>;<\/div>\n<\/li>\n
  23. \n
      }<\/span><\/div>\n<\/li>\n
  24. \n
    }<\/span><\/div>\n<\/li>\n
  25. \n
     <\/div>\n<\/li>\n
  26. \n
    for<\/span> (<\/span>let i = 0<\/span>; i < 10<\/span>; i++)<\/span> funs[<\/span>i]<\/span>(<\/span>)<\/span>;<\/div>\n<\/li>\n
  27. \n
     <\/div>\n<\/li>\n
  28. \n
    alert<\/span>(<\/span>"With redeclaration: n<\/span>"<\/span>+msg)<\/span>;<\/div>\n<\/li>\n
  29. \n
     <\/div>\n<\/li>\n
  30. \n
    <\/script><\/div>\n<\/li>\n
  31. \n
    <\/body><\/div>\n<\/li>\n
  32. \n
    <\/html><\/div>\n<\/li>\n<\/ol>\n<\/div>\n

    As you can see, the i variable works as if it was declared outside the loop, so it’s reused inside it. Thus, if you use it inside a closure, all the closures share the same reference and can see the changes produced during the iterations.<\/p>\n

    However, in the second loop a new fresh local variable is defined for each iterations, so the values aren’t shared among the closures.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Just execute this code in your browser and find the ten differences between the two loops: <html> <body> <script type="application\/javascript;version=1.7">   let funs = {}; let msg = "";   for (let i = 0; i < 10; i++) {   funs[i] = function() {     msg += "i = " + i + … Continue reading Curiosities about using closures in loops in Javascript<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/90"}],"collection":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":417,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/417"}],"wp:attachment":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}