Javascript "for..of" not working as expected.

Question

I seem to be misunderstanding the function of the "for..of" loop. In the example below I am finding the largest sub-array in an Array (in this case [2,-1,7]). When I use the "for..of" loop it returns "NaN", but both a regular for loop "(var i = 0; i < array.length; i++)" and the "for..in" return the expected result of 8.

How does "for..of" iterate differently then a regular for loop?

var array = [2,-1,7,-7];

var largestSubArray = function (array) {
    var current = 0;
    var newest = 0;

    for(var i of array){
        newest = Math.max(0, newest + array[i]);
        current = Math.max(newest, current);
    }
    return current;
};
console.log(largestSubArray(array));

// Returns NaN, should return 8

You can check this link http://stackoverflow.com/questions/29885220/using-objects-in-for-of-loops — user1850484, Jul 15 '16 at 16:10
In `for..of`, `i ` is the value and not key. Try logging `i` in console — Rajesh, Jul 15 '16 at 16:11
Reading the documentation can be helpful: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of ;) — Andreas, Jul 15 '16 at 16:21
You should checkout Array.reduce() it's built in and does what you want without you writing a for loop. — Stephen Quan, Jul 15 '16 at 16:43
Thanks for the suggestions Stephen and Andreas. Both read the documentation, and implemented this using reduce before posting but didn't understand the distinction between the two loops. Rob's answer made it click. — , Jul 16 '16 at 06:04

score 3 · Accepted Answer · answered Jul 15 '16 at 16:12

3

i is not the current index, it is the current value. Try this instead:

for(var i of array){
    newest = Math.max(0, newest + i);
    current = Math.max(newest, current);
}

answered Jul 15 '16 at 16:12

Rob M.

35,491
6
51
50

score 1 · Answer 2 · answered Jul 15 '16 at 16:13

1

Change

newest = Math.max(0, newest + array[i]);

to

newest = Math.max(0, newest + i);

answered Jul 15 '16 at 16:13

Phuong Nguyen

121
2

score 0 · Answer 3 · answered Jul 15 '16 at 16:29

I think you're mixing up for...of with for...in. The difference between the two is what is stored in your i during iterations. Both differentiate between the value and index of an array's elements (respectively).

for...of sets your i to the value of the current element in the iteration cycle

for...in sets your i to the value of the current element in the iteration cycle

A simpler way to test this in the future is to console.log your variables. A simple test illustrates the above behavior by modifying your code slightly:

var array = [2,-1,7,-7];

var largestSubArray = function (array) {
    var current = 0;
    var newest = 0;

    for(var i of array){
        console.log(i, array[i]);
        newest = Math.max(0, newest + array[i]);
        current = Math.max(newest, current);
    }
    return current;
};
console.log(largestSubArray(array));

In the above, the result is as follows:

i      array[i]
================
2      7
-1     undefined
7      undefined
-7     undefined

NaN

This is because i is equal to the value given the code above. However, changing it from a for...of to a for...in will yield the following:

i      array[i]
================
0      2
1      -1
2      7
3      -7

8

Notice your line newest = Math.max(0, newest + array[i]);. In your original code, array[i] can simply be replaced with i when using your for...of loop.

Javascript "for..of" not working as expected.

3 Answers3