I'm beginner to Javascript and reading Closures and Variables part of book "JS for web developers". It gives two examples:

function Func1() {
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function() {
           console.log('i:'+i);
           return i; 
        };
    }

    return result;
}

console.log(Func1());

function Func2() {
    var result = new Array();

    for(var i=0; i < 10; i++){
        result[i] = function(num) {
            return function() {
                console.log('num:'+num);
                return num;
            };
        }(i);
    }

    return result;
}

console.log(Func2());

In the book's description, it said in func1, every function could return 10, while in func2, each function would return different number. But when I run the code, it actually returns:

[ [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function] ]

for both functions.

So how to print out actual values for each function? And why "console.log('i:'+i);" is not printed in first function?

I'm beginner to Javascript and reading Closures and Variables part of book "JS for web developers". It gives two examples:

function Func1() {
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function() {
           console.log('i:'+i);
           return i; 
        };
    }

    return result;
}

console.log(Func1());

function Func2() {
    var result = new Array();

    for(var i=0; i < 10; i++){
        result[i] = function(num) {
            return function() {
                console.log('num:'+num);
                return num;
            };
        }(i);
    }

    return result;
}

console.log(Func2());

In the book's description, it said in func1, every function could return 10, while in func2, each function would return different number. But when I run the code, it actually returns:

[ [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function],
  [Function] ]

for both functions.

So how to print out actual values for each function? And why "console.log('i:'+i);" is not printed in first function?

• javascript
• function
• return-value

Share Follow asked Feb 18, 2019 at 3:53 L.LL.L 12611 gold badge11 silver badge88 bronze badges 3

• To print the return value of a function, you have to call it first. E.g. var arr = Func1(); arr[3](); – melpomene Commented Feb 18, 2019 at 3:56
• @L.L you need to wrap the function so it will invoke. Currently you are assigning a function to the variable. You want to invoke the function and return the result into the variable. Check my example below. – jremi Commented Feb 18, 2019 at 3:58
• var fncs = Func1(); console.log(fncs[0]()); console.log(fncs[1]()) – epascarello Commented Feb 18, 2019 at 3:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try this wrap your result[i] data into a invoked function to get the data you need...

check this:

function Func1() {
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = (function() {
           console.log('i:'+i);
           return i; 
        })();
    }

    return result;
}

console.log(Func1());

You are returning a function in your for loop, instead you should just return the value inside of your closure.

function Func2() {
    var result = new Array();

    for(var i=0; i < 10; i++){
        result[i] = function(num) {
            console.log('num:'+num);
            return num;
        }(i);
    }

    return result;
}

console.log(Func2());

Given the current output of the execution of the function, an Array of functions, you can iterate the result of FuncN then execute the function at each element of the array

for (let n = 0, f = Func1(); n < f.length; n++) {
  console.log(f[n]())
}

Try them like this:

function Func1() {
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function() {
           console.log('i:'+i);
           return i; 
        }();
    }
return result;

}

console.log(Func1());

function Func2() {
    var result = new Array();

    for(var i=0; i < 10; i++){
        result[i] = function(num) {
            return function() {
                console.log('num:'+num);
                return num;
            }();
        }(i);
    }

    return result;
}

console.log(Func2());

the problem is due the fact that you have set the function as it's return value rather than calling it and then returning.