How do I pass a variable onto a function in a for loop

Question

I'm trying to setup some key bindings in javascript for numbers 1 to 9 and click various links on the page which are labeled 'show1', 'show2', etc.

The problem is it creates the keybinding for the numbers ok but it always displays the last item, ie: 'show9'.

Here is an example where if you hit 1 or 2 on the keyboard the function will return 3, when it's supposed to return 1 & 2 respectively.

for i in [1..2]
    key i.toString(), (e) ->
        alert i

http://jsfiddle.net/DARxg/

Not a dupe - at least not of that question - OP is using coffeescript. I've updated the tags. — Adam Rackis, Oct 17 '13 at 06:36
@AdamRackis: You use [`do (i) -> ...`](http://stackoverflow.com/a/11996382/479863) or do it by hand [with parentheses just like in JavaScript](http://jsfiddle.net/ambiguous/LEBQv/). — mu is too short, Oct 17 '13 at 17:56

score 3 · Accepted Answer · edited May 23 '17 at 12:10

The function you're creating has an enduring reference to the i variable, not a copy of it as of when the function was created, which is why you always see its final value (3).

Update: There's a more CoffeeScript-ish way at the end of the answer, although it's useful to read the whole thing so you understand the trade-offs.

Instead, use a builder function that creates functions that close over a different variable, one that doesn't change: Updated Fiddle

buildHandler = (value) ->
    (e) ->
        alert value
        return

for i in [1..2]
    key i.toString(), buildHandler i

There, our handler function closes over the argument we pass buildHandler, and so it doesn't change.

More: Closures are not complicated (but based on JavaScript, not CoffeeScript)

And for those who really like immediately-invoked function expressions (IIFEs) (I don't recommend IIFEs in loops, in theory it creates a new function every time just to throw it away, and it's hard to read):

for i in [1..2]
    key i.toString(), (
        (value) ->
            (e) ->
                alert value
                return
        )(i)

mu is too short points out in the comments that CoffeeScript has a keyword for doing exactly this: do It's near the end of this section of the documentation. Using it for this would look like this:

for i in [1..2]
    key i.toString(), do (i) -> (e) ->
        alert i
        return

Now, that gets translated to JavaScript that creates unnecessary functions and throws them away (like the IIFE above does), but for a number of use cases it probably doesn't matter. I'd still probably go for the clarity of my first option above, but it's good to have lots of tools in the belt.

CoffeeScript has the `do` keyword specifically for this sort of thing, see the bottom of this section: http://coffeescript.org/#loops — mu is too short, Oct 17 '13 at 15:25
Thank you for your in-depth answer. I agree that your first answer is much easier to read. — map7, Oct 21 '13 at 00:19

How do I pass a variable onto a function in a for loop

1 Answers1