function with variable parameter changes when variable updated

Question

i'm creating functions inside a for-loop with a variable parameter. Unfortunately, as soon as the for-loop runs a second time, it updates the variable and updates all parameters of the previously generated functions. How can I parse a "detached" value in this loop, so it doesn't get overwritten by the next loop?

My current code is this:

var self = this;  

      for (var i = 0; i < wordObjects.length; i++) {
        var wordCurrent = wordObjects[i].word;
        var wordCorrect = wordObjects[i].correct;
        var moreData =  wordObjects[i].moredata;
        var successFunction = wordObjects[i].successFunction;

        //chain all arguments in one array
        variableArray = []
        variableArray = variableArray.concat(wordCorrect);
        variableArray = variableArray.concat(moreData);

        //create function
        var runFunction = function() {self.executeFunctionByName(successFunction, self, variableArray)};
        this.saveFunctions[wordCurrent] = runFunction;
      };

I tried to generate an object with all arrays inside, but then it didn't pass the arrays at all. It looked like this:

var runFunction = function() {self.executeFunctionByName(successFunction, self, variableArray[i])};

I tried to pass variableArray.slice(); but this didn't seem to work either.

variableArray is global

epascarello
– epascarello

2017-08-25 18:01:57 +00:00
Commented Aug 25, 2017 at 18:01 — epascarello
– epascarello, Commented Aug 25, 2017 at 18:01

Joshua K · Accepted Answer · 2017-08-25 17:54:24Z

1

you can solve this by using closures or by using the let statement instead of var. Simply replace var by let.

This works because of the different scoping of let. Take a look at the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Take this example:

for(var i=0;i<5;i++) {
    var j=i;
    setTimeout(function() { console.log(j); }, i*1000);
}

The output is 5x four.

for(var i=0;i<5;i++) {
    let j=i;
    setTimeout(function() { console.log(j); }, i*1000);
}

The output is 0, 1, 2, 3, 4.

To complete the answer: here the solution with a closure. Closures have a factory method and a closure method. The factory method creates a new scope everytime, the closure can use later.

for(var i=0;i<5;i++) {
    setTimeout((function() { var j=i; return function() { console.log(j); }; })(), i*1000);
}

Another way is to store i as the context of the function. This will work also:

for(var i=0;i<5;i++) {
    setTimeout(function() { console.log(this); }.bind(i), i*1000);
}

edited Aug 25, 2017 at 17:54

answered Aug 25, 2017 at 17:41

Joshua K

2,5371 gold badge12 silver badges15 bronze badges

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

4 Comments

vinni Over a year ago

Thank you so much!

Joshua K Over a year ago

test it. If you like it select it as the answer :) If you have any further questions feel free to ask

vinni Over a year ago

Everything works fine, but I now have the problem, that UglifyJS throws an error, as let is ES6 and UglifyJS doesn't support that yet. Is there an alternative way to make it work on older browsers too?

Joshua K Over a year ago

@vinni sure. use one of the closure solutions. That will work before ES6.

Collectives™ on Stack Overflow

function with variable parameter changes when variable updated

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related