Javascript create a list of functions dynamically

Question

I have a piece of JavaScript code that I want to create a list of functions. All the functions will be put in a dictionary d. d["a"] will give me the function function() {console.log("a")} and d["b"] will give me the function function() {console.log("b")} etc. This is my code:

var a = "abcdefghijklmnopqrstuvwxyz1234567890".split("");
var d = {};
for(var l = a.length, i = 0; i < l; i++)
{
    d[a[i]] = function(){console.log(a[i])};
}

However, when I run the above code, d["a"] and d["b"] will be the same, they all point to function(){console.log(a[i])}. How to get what I want?

Thanks.

user229044 · Accepted Answer · 2013-10-02 19:25:05Z

2

You need to give each instance of the function its own variable:

for(var l = a.length, i = 0; i < l; i++)
{
  (function (x) {
    d[a[x]] = function(){console.log(a[x])};
  })(i)
}

edited Oct 2, 2013 at 19:25

answered Oct 2, 2013 at 19:08

user229044♦

241k41 gold badges348 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Just a learner Over a year ago

I got the error "SyntaxError: Unexpected token (" when I run it on Chrome. Does the syntax supported by Chrome?

Butt4cak3 Over a year ago

Enclose the outer function in brackets like this: (function(x) { ... })(i)

user229044 Over a year ago

Sorry, yes, function() { }() must be (function () {})().

Nick Husher · Accepted Answer · 2013-10-02 19:38:32Z

They don't point to the same instance of function(){console.log(a[i])}, instead, you've created a bunch of functions that all use the same reference to i. The value that i points at changes as the for loop executes.

The other answers provided will work, but it involves generating twice as many functions as you need.

function makeLogFunction(whatToLog) {
    return function() {
        console.log(whatToLog);
    }
}

var a = "abcdefghijklmnopqrstuvwxyz1234567890";
var d = {};
for(var l = a.length, i = 0; i < l; i++) {
    d[a[i]] = makeLogFunction(a[i]);
}

Here, I have a makeLogFunction that will return a new function that always prints whatToLog. The other answers will generate a new "version" of the makeLogFunction every time the loop executes. For very large sets of data, this is a waste of time and memory.

This approach has added advantages of clarity and reusability. If there's a significant amount of logic happening in your loop, encapsulating it in a named function allows future reviewers to get a sense of what's going on by the name you give to the function. You can also reuse the function in other parts of your application.

Collectives™ on Stack Overflow

Javascript create a list of functions dynamically

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related