The for…of Loop

Much like many other newly graduated software engineering or computer science students, I’ve been taking a deeper dive into creating and solving problems using algorithms. While there are multiple coding languages in which to do this, my choice has been JavaScript. So, if you’re not a JS dev, this might not be totally transferable to your skills, but read further and find out!

Looping

Looping is a common programming concept, in which a task is executed repeatedly. Rather than writing out each task individually, it’s wrapped in a loop and performed under certain circumstances. The most common JavaScript loops are the for loop, while loop, and do while loop. For the purpose of this article, I’ll demonstrate the for loop.

For Loop

Of the JS loops, the for loop is the most common(and most applicable for comparing to the for…of loop). It looks something like this.

for loop code

Our for loop declares a counter variable, i =0. And, as long as i is less than the length of the nums array, the loop executes and increases the counter variable by 1. Once the counter is greater than the length of the array, the loop is complete. Essentially, the loop is saying, “Hey, do this task x number of times.” In this instance, the loop console logs each element of the array.

Let’s say, we were given an array and our task was to increase each element by 1. We could make use of the for loop within a function to do this.

Function using a for loop

Using our same array as before, [1,2,3,4,5], our function, in action, looks like this.

Console logging each element added by one

This was my go-to option for this kind of problem…until recently.

As stated earlier, I have been trying to sharpen up on and practice algorithms. To do this, I have been using the popular website LeetCode, a wonderful resource for technical interview style questions and algorithm problems. On each problem, there is a discussion tab where users can ask question, show their answers, etc. When checking out some other users’ solutions, I noticed that where I had used a for loop, they had used this different looking loop I had never seen. “What’s this?”, I thought. I was only familiar with the three loops mentioned earlier. It was time for me to do some research.

For…of Loop

As stated in the MDN web docs:

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

Like our previous example, lets have a loop that console logs each element of an array.

for…of loop

Notice the similarities, but also notice the major difference — our declaration is entirely different. Instead of having three parameters, creating a counter, and having that counter increase until it is greater than some condition, a single const variable is created. And, upon each iteration through the loop, that variable is set to equal to the next element in the array. It can also be thought of like this:

FOR someNamedVariable OF iterableObject {do something with someNamedVariable }

We can demonstrate this loop, like before, in a function increasing each element by 1.

Function using for…of loop

With the array, [1,2,3,4,5], our new function looks like this.

Conclusion

While both the for loop and the for…of loop are similar, I like the simplicity and clear syntax of the for…of. Maybe I’m just more partial since it’s newer to me? Perhaps. But, at the end of the day, it’s about having more tools at our disposal. And, as the developer, it’s ultimately up to us to decide which suits our needs best.

Give this loop a shot, and see how you like it yourself. Happy coding!