Closure Scope not captured? — Coffeescript

by

This loop:

for item in data.contents
    itemBox = $ "<div/>", class: "itembox"

is somewhat deceptive if you’re not used to (Coffee|Java)Script scope. The scoping actually looks more like this:

itemBox = undefined
for item in data.contents
    itemBox = $ "<div/>", class: "itembox"

so there is only one itemBox variable and that same variable gets used by each iteration of the loop. The click handler keeps a reference to itemBox but doesn’t evaluate the variable until the click handler is called so all the handlers end up with the same itemBox value and that will be the itemBox value at the end of the loop.

From the fine manual:

When using a JavaScript loop to generate functions, it’s common to insert a closure wrapper in order to ensure that loop variables are closed over, and all the generated functions don’t just share the final values. CoffeeScript provides the do keyword, which immediately invokes a passed function, forwarding any arguments.

So you could do this:

for item in data.contents
    do (item) ->
        # As before...

to get your itemBox scoped to each iteration of the loop individually.

Using forEach:

data.contents.forEach (item) ->

instead of a simple loop works because you’re effectively using a function as the loop’s body and any variables inside that function will be scoped to that function.

More Related Contents:

  1. What’s the correct way to communicate between controllers in AngularJS?
  2. Why does this function return a different value every time?
  3. Angularjs, passing scope between routes
  4. How to assign to a global variable in Sass?
  5. Static (Lexical) Scoping vs Dynamic Scoping (Pseudocode)
  6. cmake variable scope, add_subdirectory
  7. Is there a overall explanation about definitional scoping in Rebol and Red
  8. Why is a variable value not available after add_subdirectory-ing a CMakeLists.txt that defines it? How can I make it so?
  9. How to use provided scope for jar file in Gradle build?
  10. Don’t understand why UnboundLocalError occurs (closure) [duplicate]
  11. Why doesn’t adding CORS headers to an OPTIONS route allow browsers to access my API?
  12. Javascript function scoping and hoisting
  13. Define a global variable in a JavaScript function
  14. Is there a reason for C#’s reuse of the variable in a foreach?
  15. Derived template-class access to base-class member-data
  16. Will const and let make the IIFE pattern unnecessary?
  17. What does this “(function(){});”, a function inside brackets, mean in javascript? [duplicate]
  18. When is an object “out of scope”?
  19. Problems with local variable scope. How to solve it?
  20. Accessing a static variable via an object reference in Java
  21. Environment detection: node.js or browser
  22. Why use the javascript function wrapper (added in coffeescript) “.call(this)”
  23. Can a Jinja variable’s scope extend beyond in an inner block?
  24. How do I enable Webstorm intellisense for AngularJS when writing CoffeeScript
  25. Why can functions in Python print variables in enclosing scope but cannot use them in assignment? [duplicate]
  26. Accessing a variable defined in a parent function
  27. Setting onclick to use current value of variable in loop [duplicate]
  28. jquery – scope inside $(document).ready()?
  29. Scope of variable within “with” statement?
  30. Checkbox not binding to scope in angularjs

Leave a Comment