Javascript: Creating Functions in a For Loop

by

The second method is a little clearer if you use a parameter name that does not mask the loop variable name:

funArr[funArr.length] = (function(val) { return function(){  return val; }})(i);

The problem with your current code is that each function is a closure and they all reference the same variable i. When each function is run, it returns the value of i at the time the function is run (which will be one more than the limit value for the loop).

A clearer way would be to write a separate function that returns the closure that you want:

var numArr = [];
var funArr = [];
for(var i = 0; i < 10; ++i){
    numArr[numArr.length] = i;
    funArr[funArr.length] = getFun(i);
}

function getFun(val) {
    return function() { return val; };
}

Note that this is doing basically the same thing as the first line of code in my answer: calling a function that returns a function and passing the value of i as a parameter. It’s main advantage is clarity.

EDIT: Now that EcmaScript 6 is supported almost everywhere (sorry, IE users), you can get by with a simpler approach—use the let keyword instead of var for the loop variable:

var numArr = [];
var funArr = [];
for(let i = 0; i < 10; ++i){
    numArr[numArr.length] = i;
    funArr[funArr.length] = function(){  return i; };
}

With that little change, each funArr element is a closure bound do a different i object on each loop iteration. For more info on let, see this Mozilla Hacks post from 2015. (If you’re targeting environments that don’t support let, stick with what I wrote earlier, or run this last through a transpiler before using.

More Related Contents:

  1. Javascript function not working, what is wrong? [closed]
  2. How would I make a Timer which times things in 0.75 seconds Javascript?
  3. How to use variable instead of function name in JavaScript
  4. Javascript return in Function
  5. What is the difference between a function call and function reference?
  6. JavaScript check if variable exists (is defined/initialized)
  7. JavaScript variable number of arguments to function
  8. Is there a better way to do optional function parameters in JavaScript? [duplicate]
  9. How can I create an Asynchronous function in Javascript?
  10. Function in JavaScript that can be called only once
  11. Javascript “this” pointer within nested function
  12. Returning Chrome storage API value without function
  13. How does this object method definition work without the “function” keyword?
  14. Dynamic function name in javascript?
  15. Adding custom properties to a function
  16. Proper use of const for defining functions
  17. Javascript Image Url Verify
  18. Why doesn’t console.log work when passed as a parameter to forEach?
  19. Strange JavaScript idiom – what does “/xyz/.test(function(){xyz;})” do?
  20. functions inside or outside jquery document ready
  21. Where can I find javascript native functions source code? [duplicate]
  22. javascript named function expressions – scope accessibility [duplicate]
  23. What happens when JavaScript variable name and function name is the same?
  24. List of global user defined functions in JavaScript?
  25. Javascript function challenge add(1,2) and add(1)(2) both should return 3
  26. Javascript: Get access to local variable or variable in closure by its name [duplicate]
  27. Lambda function syntax in JavaScript without curly braces
  28. What are the different ways of writing an IIFE? What are their use cases?
  29. How to get function body text in JavaScript? [duplicate]
  30. Why can’t I use a Javascript function before its definition inside a try block?

Leave a Comment