See More

The goal of the code above is to alert the numbers 0, 1, and 2 each after 1, 1.1, and 1.2 seconds, respectively. The problem though, is that if you run the above code in your console, you actually get the number 3<\/b> alerted 3 times after 1, 1.1, and 1.2 seconds. This is because of an issue with JavaScript closures. Click here<\/a> to run the above code and see the output for yourself.\r\n\r\nA JavaScript closure<\/b> is when an inner function has access to its outer enclosing function's variables and properties. In the code above, the following line of code:<\/p>

setTimeout(function() { alert(i); }, 1000 + i);<\/pre>
uses a variable i<\/span> which is declared outside of itself. The variable i<\/span> is actually declared within the for<\/span> loop and the inner function accesses it. So when the for<\/span> loop is done running, each of the inner functions refers to the same variable i<\/span>, which at the end of the loop is equal to 3. Our goal is for each inner function to maintain its reference to the variable i<\/span> without the value of it being altered. We'll solve this using an IIFE<\/a>, or an immediately-invoked function expression.<\/p>
for (var i = 0; i < 3; i++) {\r\n  setTimeout(function(i_local) { \r\n    return function() { alert(i_local); } \r\n  }(i), 1000 + i);\r\n}<\/pre>
We pass the variable i<\/span> into the outer function as a local variable named i_local<\/span>, where we then return a function that will alert the i_local<\/span> for us. This should now correctly alert the numbers 0, 1, and 2 in the correct order. Click here<\/a> to run this new code.<\/p>_STOP-HERE-END-2_<\/div><\/div>\r\n
2<\/span>Write a function that would allow you to do this.<\/div>
var addSix = createBase(6);\r\naddSix(10); \/\/ returns 16\r\naddSix(21); \/\/ returns 27\r\n<\/pre>
Answer<\/div>_STOP-HERE-START-3_
You can create a closure to keep the value passed to the function createBase<\/span> even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure<\/a>, and it has access to the variables within the outer function, in this case the variable baseNumber<\/span>.<\/p>
\r\nfunction createBase(baseNumber) {\r\n  return function(N) {\r\n    \/\/ we are referencing baseNumber here even though it was declared\r\n    \/\/ outside of this function. Closures allow us to do this in JavaScript\r\n    return baseNumber + N;\r\n  }\r\n}\r\n\r\nvar addSix = createBase(6);\r\naddSix(10);\r\naddSix(21);<\/pre>_STOP-HERE-END-3_<\/div><\/div>\r\n
3<\/span>How would you use a closure to create a private counter?<\/div>
Answer<\/div>_STOP-HERE-START-4_
You can create a function within an outer function (a closure) that allows you to update a private variable<\/a> but the variable wouldn't be accessible from outside the function without the use of a helper function.<\/p>
function counter() {\r\n  var _counter = 0;\r\n  \/\/ return an object with several functions that allow you\r\n  \/\/ to modify the private _counter variable\r\n  return {\r\n    add: function(increment) { _counter += increment; },\r\n    retrieve: function() { return 'The counter is currently at: ' + _counter; }\r\n  }\r\n}\r\n\r\n\/\/ error if we try to access the private variable like below\r\n\/\/ _counter;\r\n\r\n\/\/ usage of our counter function\r\nvar c = counter();\r\nc.add(5); \r\nc.add(9); \r\n\r\n\/\/ now we can access the private variable in the following way\r\nc.retrieve(); \/\/ => The counter is currently at: 14<\/pre>_STOP-HERE-END-4_<\/div><\/div>","Tags":"javascript, bootcamp, closure, Hack Reactor,","Date":"12-6-15","Image":"https:\/\/coderbytestaticimages.s3.amazonaws.com\/default_profile\/default_life_blue.png","pageType":"algorithm","cut":"
  






  
    

      
      

        

          


            

              

                Article type: {{ thisQuesInfo.pageType.substr(0, 1).toUpperCase() + thisQuesInfo.pageType.substr(1) }}
              

              
{{ thisQuesInfo.Title }}

              

                

                  {{ thisQuesInfo.Author }} published this on {{ thisQuesInfo.Date.replace(/-/g, '/') }}
                

              

            


            

              

                

              

            


            


            
Comments ({{ bestVotes.length }})

            

              

                

                  

                  
{{ comment.value }}

                  

                

                

                  

                  

                    

                      {{ comment.thisAnsInfoAuthor }} commented on {{ comment.thisAnsInfoDate }}
                    

                  

                

              

            


            

            

            

              Log in to submit a comment.