Why does this code return undefined 4 times instead of the array values?

Question

This is an example from a blog post by Avaylo Gerchev that addresses IIFE's. The following block of code returns 4 repeated 'undefined' responses by design:

function printFruits(fruits){
  for (var i = 0; i < fruits.length; i++) {
   setTimeout( function(){
      console.log( fruits[i] );
    }, i * 1000 );
  }
}

printFruits(["Lemon", "Orange", "Mango", "Banana"]);

Avaylo then shows how to produce what (to me) would have been the expected output of the first code block (it outputs the values of the array):

function printFruits(fruits){
  for (var i = 0; i < fruits.length; i++) {
    (function(){
      var current = i;                    // define new variable that will hold the current value of "i"
      setTimeout( function(){
        console.log( fruits[current] );   // this time the value of "current" will be different for each iteration
      }, current * 1000 );
    })();
  }
}

printFruits(["Lemon", "Orange", "Mango", "Banana"]);

I understand that the IIFE creates a new scope. What I don't understand is the reason why the first block of code doesn't produce the (again, to me) expected output of returning the values in the array. I've been staring at this for a few days now, thus I conclude that my javascript knowledge is missing something fundamental.

Thank you for any insight!

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Arun P Johny, Mar 03 '15 at 11:39
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake — Arun P Johny, Mar 03 '15 at 11:39
(tl;dr when the setTimeout function runs it will always refer to the same variable `i` that's used in the loop, and because the loop has long since finished its value is always equal to `fruits.length`.) — JJJ, Mar 03 '15 at 11:42
http://brackets.clementng.me/post/24150213014/example-of-a-javascript-closure-settimeout-inside — Gopinath Shiva, Mar 03 '15 at 11:49

score 0 · Accepted Answer · answered Mar 03 '15 at 11:46

In the first code block, the variable "i" is not accessible by the closure because setTimeout only defines what code to run but doesn't actually run it on definition, only later.

Having the closure there and running it immediately (with the parentheses () at the end) is a way to save the value of "i" in each iteration so that when setTimeout runs, it can access it.

Why does this code return undefined 4 times instead of the array values?

1 Answers1