The for of Loop in ES6

Tuesday, January 20, 2015

In a previous post we looked at using iterators directly. Working with iterators at a low level will sometimes be useful, as we’ll see in future posts, but ES6 also provides a new looping syntax to work with iterators at a higher level – the for of loop.

let sum = 0;
let numbers = [1,2,3,4];

for(let n of numbers) {
    sum += n;
}

expect(sum).toBe(10);

There are a couple observations to make about the above code.

First, the new for of loop looks much like the for in loop, which has always been around, but the two are subtly different. The for in loop works with the enumerable properties of any object, thus when working with an array, for in will iterate over the available indexes of the array, not the available values. To compute the same sum as the above code with for in, we’d need to index into the array with each iteration:

let sum = 0; 
let numbers = [1,2,3,4]; 

for(let i in numbers) { 
    sum += numbers[i]; // notice the indexer 
} 

expect(sum).toBe(10);

The for of loop uses an iterator to visit the values in an array, not the available keys.

for(let n of numbers) { 
    sum += n; 
} 

This brings up the second subtle difference with for of, the for of loop exists not to work with just any type of object, but with iterable objects. Iterable objects are objects with a special method returning an iterator. We’ll look at the special method in a future post, but notice how the above code doesn’t need to use the values method of the array like the low level iterator code we wrote in the last post. The for of loop uses the numbers array directly.

There are many objects in the world of ES6 that will be iterable objects, and we will see more in future posts. For now, we’ve already seen how arrays are iterable. Strings are also iterable (you can iterate over the sequence of characters inside).

let result = ""; 
let message = "Hello"; 

for(let c of message) { 
    result += c; 
} 

expect(result).toBe("Hello"); 

How does does for of retrieve an iterator? And what makes an object iterable? To answer these questions we have to take a brief detour into another new feature of ES6 – the Symbol.


Comments
gravatar Norman Thursday, January 22, 2015
I have been enjoying this series thanks. And there is a book coming - "we will see more in this book" - That will be handy for tieing it all together.
gravatar Scott Thursday, January 22, 2015
@Norman - good catch, I was supposed to edit that to say "future posts", but yes, I hope to make a book out of the material this year.
Comments are closed.

My Pluralsight Courses

K.Scott Allen OdeToCode by K. Scott Allen
What JavaScript Developers Should Know About ECMAScript 2015
The Podcast!