Monday, May 10, 2010

Intuition When Using Closures

I got into a debate with somebody in #javascript today regarding closures: how they work, how they should work, and are they intuitive. This person had run into a problem similar to the one I posted about earlier. In any case, as the discussion was coming to a close, I created some examples which somebody suggested I blog about. Let's start with a simple piece of code that more or less shows the original problem.

var i = 0; 
el.onclick = function() { print(i); }; 
i++;

In the above example what will be printed? This person argued that, intuitively, "0" should be printed. Of course the correct answer is that "1" will be printed. I can understand how this may be confusing to someone new to Javascript. However, take another example:

var i = 0;
var func = function() { i++; };
func();
print(i);

If I were to show this piece of code to someone, they would probably say that it makes sense. Of couse "1" will be printed. It is intuitive (and correct). Following that line of reasoning:

var i = 0;
var func = function() { print(i); };
i++;
func();

This code also seems to make sense, especially in light of the previous example. The only real difference is that this example reads/prints the variable, and the previous one modified the variable. In both cases "1" will be printed.

Now we're back to the original code:

var i = 0; 
el.onclick = function() { print(i); }; 
i++;

Note that the only difference between this piece of code and the previous one is when the function is executed. In one the function is executed right away, in the other the function is executed as a click handler. In both cases i++ occurs first and in both cases "1" is printed. This is consistent behavior and somewhat shows how closures can morph from something which "just makes sense" into something that isn't quite as intuitive.

The reason for this behavior is that closures work by pointing to the original variable by reference, if you will, not by value - even for primitives. So when the anonymous function runs, i is still pointing back to the original i which has been incremented to 1.

30 comments:

  1. Image

    Thanks for writing this up, James. This is a great explanation of something that beginners often trip over.

    ReplyDelete
  2. Image
  3. Image
  4. Image
  5. Image
  6. Image
  7. Image
  8. Image
  9. Image
  10. Image
  11. Image
  12. Image
  13. Image
  14. Image
  15. Image
  16. Image
  17. Image
  18. Image
  19. Image

    It’s genuinely very complicated in this active life to listen news on Television, thus I simply use world wide web for that purpose, and take the most recent news. I am reading this wonderful article to increase my know-how. ufa168

    ReplyDelete
  20. Image

    This comment has been removed by the author.

    ReplyDelete
  21. Image

    Thanks you so much ....It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. We provide best realtime project centers in chennai we offer project for final year students

    ReplyDelete
  22. Image

    Thank you so much for the information, Best regards from Website

    ReplyDelete
  23. Image
  24. Image

    It's really nice and meanful. It's really cool blog. Linking is very useful thing.... MM

    ReplyDelete
  25. Image

    Interesting stuff in your blog. Its great article. Will look forward to read more articles... MM

    ReplyDelete
  26. Image

    Looking forward on your work and I think that you're always doing an excellent job!!... MM

    ReplyDelete
  27. Image

    Amazing post written. It shows your effort and dedication. Thankyou... MM

    ReplyDelete
  28. Image

    Thanks for sharing such a good opinion, post is nice, that why i have read it completely... MM

    ReplyDelete
  29. Image

    Nice post! This is a Very nice blog that I will definitively come back. Thanks... MM

    ReplyDelete
  30. Image

    Hello! I was surprised to see your writing. This is a really useful resource... MM

    ReplyDelete