Why does “undefined” end a loop in JavaScript?

I am having trouble understanding how this for-loop terminates in JavaScript:

var files = ["A", "B"];
for (var i = 0, f; f = files[i]; i++) {
   console.log(f);
}

When run, it displays A and B on the screen, but why does f=files[2] end the loop? If I run f=files[2] in my console I get the answer “undefined”, so what is the rationale behind the fact that this should end the loop?

  • JQuery: Iterate through an array by using on('click')
  • ECMAScript 2015: const in for loops
  • Having trouble with onchange and storing numbers in an array via textbox
  • Elements order in a “for (… in …)” loop
  • Does Javascript have an enhanced for loop syntax similar to Java's
  • Delay lineTo in for loop
  • Bonus question: Why not write the loop instead as the following?

    for (var i=0; i < files.length; i++) {
        f = files[i];
        console.log(f);
    }
    

    This seems clearer and more maintainable to me, so is there some reason that the first piece of code would be used over the second?

  • How to exit (escape) a function from for loop inside of it?
  • How to retrieve filtered data from json with double for loop
  • for of loop querySelectorAll
  • For-loop saving state with closure
  • delay a for loop with javascript
  • Using javascript for loop, access php array variables
  • 5 Solutions collect form web for “Why does “undefined” end a loop in JavaScript?”

    The loop ends because undefined is a falsey value.

    The reason why use one over the other is user preference. You have a preference while someone else preferred the other way. Someone else might want to use a while loop. There is no right way.

    Arrays are numbered starting at zero, so array[] = [0,1,2]. Your code tries to initialize a value to files[2] which is the third place in the array, but your array is only defined as having 2 spaces. So once it sees that it has reached the end of the array, it exits the loop.

    As for one of the loops being favored over the others I would assume your second loop would be better, because the first one it is essentially trying to assign a value out of bounds in the array and failing, so it exits. I would say that the second one is safer.

    You got “undefined” just when you are running the code in the console. Because when run any code in the console, it will return “undefined” if not return any things.

    for ( ExpressionNoInopt ; Expressionopt ; Expressionopt )
    Statement

    The first Expression in the for statement, if present, is checked for false-ishness to exit the loop. undefined is a falsy so this terminates the loop.

    As for the bonus question, there are many ways to write that loop. For me, the code you proposed is more readable. Having said that, you can use Array.forEach to iterate arrays in more recent browsers.

    Prefer for (var i=0; i < files.length; i++) {}

    Consider arr = [0,1,2]

    for (var i = 0; i < arr.length; i++) {} would correctly loop over all elements in the array, but for (var i = 0, item; item = arr[i]; i++) {} would not (and would fail to execute completely).

    Note that neither construct is good for handling sparse arrays (but then again, you should probably just use and treat it as an object at that point).

    Consider using Array.prototype.forEach or for( var item in arr ) {} when having to deal with sparse arrays. Be aware that for( var item in arr ) {} will also return Array.prototype values, and that Array.prototype.forEach is not implemented in every browser.