The for...of Loop

A cleaner syntax for iterating through items, one by one.

Introduction

A common task you will encounter when programming is iterating over arrays or array-like objects. As a JavaScript programmer, you may already be familiar with the for loop. This loop requires a counter, an iteration statement, and a stopping condition to control looping. While powerful, the for loop can be a bit cumbersome to set up, introduces room for errors, and could lead to difficult-to-read code.

As a remedy to some of the for loop’s shortcomings, the ES6 version of JavaScript introduced the shorter and more concise for...of loop. This article will outline the benefits of using for...of loops and walk through how to use a for...of loop to iterate through arrays and strings.

for loop vs for…of loop

Here is an example of iterating over each element in an array using a traditional for loop with an index variable:

const hobbies = ['singing', 'eating', 'quidditch', 'writing'];

for (let i = 0; i < hobbies.length; i++) {

console.log(`I enjoy ${hobbies[i]}.`);

}

And here is an example of iterating through the same array using a for...of loop:

const hobbies = ['singing', 'eating', 'quidditch', 'writing'];

for (const hobby of hobbies) {

console.log(`I enjoy ${hobby}.`);

}

Both examples print out the same thing:

I enjoy singing.

I enjoy eating.

I enjoy quidditch.

I enjoy writing.

Notice how the for...of loop has a simpler syntax which can be beneficial for code readability, especially in larger and more complex applications.

Iterating Through an Array

One of the primary uses of the for...of loop is iterating through the items of an array. Let’s breakdown the syntax with a new example:

const fruits = ['oranges', 'apples', 'grapes'];

for (const fruit of fruits) {

console.log(fruit);

}

Which prints out:

oranges

apples

grapes

Let’s break down the example:

In our code snippet, we have fruits, which is the array we want to iterate over.
We set up our for...of loop: for (const fruit of fruits). This specifies that we will iterate through the array (fruits) for each item (fruit) in the array.
The variable fruit is assigned a different value on each iteration of the loop. The variable may be declared with the keywords: const, let, or var. You can name the variable anything but it is helpful to use a name related to the iterable object. In the example, notice the placeholder variable uses the singular form of a plural array, fruit of fruits. Here are some other examples: person of a people array, puppy of a puppies array, etc.
For each item in the array, we print the value to the console.
The loop will start with the first element of the array and stop on the last element.

There is no need to set up additional variables to store an index with a for...of loop. The loop will iterate over each element in the iterable object and terminate itself when it reaches the last item — so you don’t need to track the number of items in the array. In our example, we used an array, but for...of loops also work with strings, sets, and other array-like objects.

Therefore, you should opt for a standard for loop if you need to access the indices or need finer control to determine what elements you want to loop over.

Iterating Through a String

The for...of can also be used to iterate over strings. Here is an example:

const username = 'joe';

for (const char of username) {

console.log(char);

}

Which prints out:

Notice the similarities between iterating through a string and iterating through an array. The for...of loop does not change in structure regardless of the iterable object used.

Break and Continue

for...of has the advantage of setting up most of your loop parameters for you, but sometimes it is necessary to reclaim some control of how iteration is managed. One way of doing this is using JavaScript’s break and continue statements.

The break statement can be used to jump out of a loop. For example:

const strangeBirds = ['Shoebill', 'Cockatrice', 'Basan', 'Terrorbird','Parotia','Kakapo'];

for (const bird of strangeBirds) {

if (bird === 'Basan'){

break;

}

console.log(bird);

}

Will iterate through the array until it encounters the great mythical Basan, then it will exit. This will print out:

Shoebill

Cockatrice

The continue statement is used to skip one iteration of the loop. For example:

const strangeBirds = ['Shoebill', 'Cockatrice', 'Basan', 'Cow', 'Terrorbird', 'Parotia', 'Kakapo'];

for (const bird of strangeBirds) {

if (bird === 'Cow'){

continue;

}

console.log(bird);

}

Will iterate through the array and print out every value except the suspected imposter:

Shoebill

Cockatrice

Basan

Terrorbird

Parotia

Kakapo

Use Case: for loop vs for…of loop

You might now be wondering, why use a for loop at all if a for...of loop is so much simpler? Well, the for...of loop is not a complete replacement for the for loop. Take a look at the following code snippet:

const nums = [1, 2, 3];

for (let i = nums.length - 1; i >= 0; i--) {

console.log(nums[i]);

}

console.log('Time is up!');

Which prints:

Time is up!

In the example above, we iterated through an array in reverse! You would not be able to use a for...of loop to do the same thing. However, with a regular for loop, you have access to indices of the elements, determine a stopping condition, and the ability to set a counter. Keep these factors in mind when deciding what loop is right for your circumstance.

Exercise: Spelling Wizard

Now that we’ve shown you how to set up and use a for...of loop, let’s practice with a code challenge by writing some code yourself.

First, let’s write a program to help us improve our spelling skills.

Given the spellingWord, use a for...of loop to log each letter using console.log().

const spellingWord = 'hippopotamus';

// Write your code below

Exercise: Pokemon Catcher

Write a for...of loop that iterates through our pokemonList array.
Inside the block of the for...of loop, use console.log() and string interpolation as modeled above to log each element in the pokemon array within the string 'You caught a 'X'!' For example, the first iteration of the loop should print ‘You caught a Pikachu!’ to the console.
One of the elements, 'Yoshi', is not a Pokemon. If you encounter 'Yoshi', use continue to skip this element before it is logged to the console.

const pokemonList = ['Pikachu', 'Charizard', 'Squirtle', 'Yoshi', 'Snorlax'];

// Write your code below

Review

Congratulations! You have now been introduced to for...of and have successfully used it. In this article, you have learned how to do the following:

Understand the benefits of for...of.
Create a for...of loop from scratch.
Use a for...of loop to iterate over characters in strings and elements in arrays.
Use break and continue to control looping in a for...of loop.

There are other for type loops in JavaScript that exist for different purposes, such as for...in. Be careful to choose the correct type of loop for your situation. The next time you need to iterate through an array, string, or array-like object and don’t need to access the index, consider trying out for...of to keep your code succinct and readable.

Page updated

Report abuse