Lesson Thursday

In this lesson, we'll cover some JavaScript syntactic sugar that we can use to loop over arrays, strings, and other iterable objects. Specifically, we'll take a look at looping with for...of, which has advantages over both Array.prototype.forEach() and standard for loops.

First, we'll take a look at how we can use this kind of loop with an array. Yes, are going to do the thing where we double the numbers again - if only so we can easily compare the difference between each kind of JavaScript loop.

Here's how we can create an array of doubled numbers using for...of:

const array = [0,1,2,3,4,5];
let doubledArray = [];
for (const element of array) {
  doubledArray.push(element * 2);
}
doubledArray;

At this point, you might be thinking "so what?" It's just as easy to use Array.prototype.forEach() - why not just use that to loop over arrays instead?

Well, check this out:

const array = [0,1,2,3,4,5];
let doubledArray = [];
for (const element of array) {
  doubledArray.push(element * 2);
  console.log("Never mind!");
  break;
}
doubledArray;

Unlike with Array.prototype.forEach(), we can break out of a for...of loop with either a break; statement or a return statement. That's a pretty big advantage. As you can see, for...of loops don't have issues with OBOEs - we can just use them to iterate through any array, breaking out of them when we need to.

Pretty awesome - and more convenient than either a for loop or Array.prototype.forEach() when iterating over arrays.

It gets better. We can use for...of to iterate over strings, too. For instance:

const consonantString = "bdfmxtgl"
let vowelizedString = "";
for (const letter of consonantString) {
  vowelizedString = vowelizedString.concat(letter + "a");
}
vowelizedString;

This returns the string "badafamaxatagala".

Very convenient! This is another huge advantage of for...of. Array.prototype.forEach() can't iterate over strings.

By the way, you might be thinking "Hey! Why didn't I learn about this before the pig latin project? It might've been helpful!" Well, maybe so - but it's also important to practice using methods like String.prototype.split() and Array.prototype.join() - plus good old fashioned basic for loops - all practice that we might be able to skip if we jumped right to for...of loops.

In general, you can (and should) use for...of whenever you want to iterate over strings or arrays - even if you plan to break or return out of these loops. There are always use cases when you'll want to use a different kind of JavaScript loop but this is a good all-purpose loop - a tool that you'll reach for often because it's flexible, concise, and gets the job done.

Terminology


  • for...of: A technique we can use to loop through arrays, strings, and other types of iterable objects.

Examples


Example Using an Array

const array = [0,1,2,3,4,5];
let doubledArray = [];
for (const element of array) {
  doubledArray.push(element * 2);
}
doubledArray;

Example Using a String

const consonantString = "bdfmxtgl"
let vowelizedString = "";
for (const letter of consonantString) {
  vowelizedString = vowelizedString.concat(letter + "a");
}
vowelizedString;

Lesson 29 of 34
Last updated August 10, 2020