Javascript array with callback function

Question

I tried to have better understanding of JavaScript. Here is a piece of code that I read from JavaScript function closures.

var funcs = [];
// create a bunch of functions
for (var i = 0; i < 3; i++) {
   funcs.push(function() {
    console.log(i);
   })
}
// call them
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

The array funcs has a push callback function. I don't why in the J loop, funcs[j]() will call this function to print the i in the console.
I have tried to understand this sequencey by adding some console messages:

var funcs = [];
console.log("start");
for (var i = 0; i < 3; i++) {
  console.log("i:" + i);
  funcs.push(function(){
    console.log(i);
  })
}

console.log("J loop");
for (var j=0; j<3; j++) {
  console.log("j:" + j);
  funcs[j]();
}

As expected, there is 3 for all three functions.
My question is: How does funcs[j]() calls the funcs.push(...) function? I understant the funcs[j] is reference the j element of the funcs array. But why having parentheses () will call the push(...) function?

It doesn't call the .push() function; it calls the function that was passed to .push(), the little function with console.log(i); inside. — Pointy
– Pointy, Commented Mar 21, 2016 at 15:40
@Pointy can you explain a little bit more? That's what I am confused about. Why does it call the function that was passed to .push()? It is a syntax or something else? — Shaohao
– Shaohao, Commented Mar 21, 2016 at 15:41
.push add element at the end of the array. In first loop you pushed a function to the array. In second loop , you are invoking the function with () [] indicating index. — Darlyn
– Darlyn, Commented Mar 21, 2016 at 15:42
Possibly separately from what confusing you, the code above also has the issue that the value of i may surprise you: stackoverflow.com/questions/750486/… — T.J. Crowder
– T.J. Crowder, Commented Mar 21, 2016 at 15:44

Quentin · Accepted Answer · 2016-03-21 15:42:55Z

11

function() {console.log(i);} is an expression which evaluates to a value that is function that logs i.

funcs.push is a function that adds a value to an array.

Putting () after a function will call that function.

funcs.push(some_value) calls the push function and passes some_value as the value to put in the array.

funcs.push(function() {console.log(i);}) adds the function to the array.

The value of funcs[0] becomes that function.

Putting () after a function will call that function.

funcs[0]() calls the function that is the first value in the array.

answered Mar 21, 2016 at 15:42

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

Shaohao Over a year ago

Thank you for the step by step explanation! It's very helpful!

Shaohao Over a year ago

So putting () after a function will always invoke whatever function in the push()?

Quentin Over a year ago

Putting () after a function will invoke that function. Putting it after something which represents the function which was pushed into the array will invoke that function.

Arnau Castellví · Accepted Answer · 2016-03-21 15:50:23Z

-1

First, the 'i' variable are global, and ending the loop, i=3 Then, the functions inside funcs, use the variable "i", then, all functions print "3" in console.

Maybe you wanted to do this:

var funcs = [];
console.log("start");
for (var i = 0; i < 3; i++) {
  console.log("i:" + i);
  funcs.push(function(i){
    console.log(i);
  })
}

console.log("J loop");
for (var j=0; j<3; j++) {
  console.log("j:" + j);
  funcs[j](j);
}

answered Mar 21, 2016 at 15:50

Arnau Castellví

2403 silver badges14 bronze badges

1 Comment

Shaohao Over a year ago

Thanks for the answer, but I don't have a problem to understand why it prints 3 three times. I just have a problem about why () will invoke the console.log(i) function. And @Quentin did a great job to explain it.

Collectives™ on Stack Overflow

Javascript array with callback function

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related