JavaScript 101: for…of and for…in

Disclaimer: This material was taught in The Modern Javascript Bootcamp Course by Colt Steele and Stephen Grider, which I highly recommend.

In JavaScript, if you are iterating, you are most likely using a for loop. More often than not, you would start with the first index, 0, and iterate through every element of the iterable item (a String, an Array, or an Array-like Object).

Basic for loop pseudocode

There are, nonetheless, variations of for loops that can be easier to read. Take, for example the for…of loop. (Please note that the for…of loop does not work for Internet Explorer). A for…of loop avoids having to write your code using the index, i.

Basic for…of pseudocode

The above image can be translated as:

for (let variableName of arrayName){ statement of code with variableName }

Inside the for…of loop, you must declare a variable (variableName). That variable is looping through an interable item (arrayName). variableName is ultimately replacing arrayName[i] if you were using a standard for loop whose contents would include: for (i=0; i<arrayName.length; i++){}.

That’s all there is to a for…of loop. Let’s say you want to print 1, 2, 3, 4. You can make an array = [1, 2, 3, 4] and use the for…of method to print each element in the array:

Using for…of instead of a for loop

You can also use the for…of loop to iterate a declared variable through each character of a String. In the example below, the string “louder” is printed with individual upper case letters, first by using a basic for loop, then by using a for…of loop:

First example is a for loop. Second example is a for…of loop.

While it is functionally the same as using a basic for loop, the for…of loop looks much cleaner in the example above.

Nonetheless, there are many instances where a traditional for loop is actually cleaner than using a for…of loop. Let’s say, for example, that you are dealing with two arrays that you are matching based on their indices. Perhaps you have an array of cities and a matching array of football team names. In that case, using a for loop would be much cleaner than using a for…of loop:

Example of for being cleaner than for…of

To make the for…of loop work in the example above, we needed to nest a loop of the teams array inside of the loop of the cities array and check if their indices matched before printing the result. The for loop is much cleaner since it already accounted for the index, i, that was needed from both arrays.

Can we use a for…of loop with Objects? Yes, with some alterations. A for…of loop would not work on a basic Object because an Object is not iterable. If you try, the error you would receive is Uncaught TypeError: objectName is not iterable.

If, however, you convert the Object by using Object.keys(objectName) or Object.values(objectName), you can create an iterable list of the Object’s keys or values, respectively. If you want both the keys and the values, you can iterate with:

Pseudocode for using for…of with an Object (objectName).

Inside the statement, each iterated key can be coded with keyName and each iterated value can be coded with objectName[keyName]. Below are examples of an Object that uses football teams’ cities as its keys and names as its values:

Converting an Object with Object.keys(objectName) or Object.values(objectName) to turn the Object into something iterable — and, thus, useable with a for…of loop.

While the for…of loop can work for Objects with the adjustments of Object.keys(objectName) or Object.values(objectName), it is much simpler to use the for…in loop for Objects.

Basic for…in pseudocode

A for…in loop has a variable that, through each iteration, represents the key in the given Object. It’s that simple. Use a for…in loop to iterate through the keys of a given Object. Back to our example of football teams and their cities/names:

Using for…in loops for an Object. Note that the variable, key, can be named anything, but does represent the key of the Object, teams.

In the for…in examples above, we are using the variable key to print each team’s city and teams[key] to print each team’s name.

So for…of is used to iterate through an Array (or anything that is iterable) and for…in is used to iterate through the keys of an Object. But can you use for…in to iterate through an Array? The answer is yes, but the Array is actually treated as if it were an Object with its keys being the Array’s indices and its values matching those indices’ elements.