JavaScript Loops: There is More than ‘for’

I’m bored of basic for statements…

TL;DR — Loops and Iteration 🤓

This week I’m grasping for blog ideas (always a good way to start to captivate your readers).

I have an idea talking about the decentralization of Twitter and what that could mean in the future, but, to be honest, I just did not feel like it today. I’ve been shoveling snow every other day and I’m pooped (it’s been like twice this past week, but I’m a baby). But, during my morning scroll I stumbled upon an image of a coffee cup that featured a do…while loop on it. I’m sure you’ve seen it, but if you haven’t, it’s basically an infinite loop of drinking coffee and refilling your mug. (see pic below)

Found it!

Why does any of this matter? Well, it doesn’t. BUT, it did make me realize something. As I continue to grow my algorithm solving skills on HackerRank, I’ve defaulted to using for statements as my looping go to. Which lead me to cracking open the ol’ MDN docs and taking a look at various ways JavaScript utilizes Loops and iteration.

Loops

JavaScript, and most programming languages, offers many different kinds of loops. Loops provide developers a way to repeat lines of code, or an action, a number of times. Each of these different types of loops serve their purposes for specific situations, but I’ve found that most are interchangeable allowing the coder to decide which one they like to use best. I typically decide which loop to use depending on how pretty it makes my code look 💁🏻‍♂️💅🏼. Too much clutter and I search for a different way to say the same thing.

Unfortunately, I’ve kind of drifted away from implementing different loops because I can quickly write for (let i = 0; i < array.length; i++){} and it usually solves the problem I’m working on. When I saw the coffee mug this morning, it inspired me to reacquaint myself with other ways to write loops and I hope this brief overview will help new coders.

Our Loop

For the purpose of this blog I will be using loops to print to the console the integers 1, 2, 3, 4, 5 & return a value of undefined; these integers will be contained in an array. Like this:

let arr = [1, 2, 3, 4, 5]

I’m not going to go into great detail on when you should use one loop over another. This is for the sole purpose of showing early coders how each loop works to get this simple task done.

for statement

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
// 1,2,3,4,5
-> undefined

do…while statement

let arr = [1, 2, 3, 4, 5];
let i = -1;
do {
    i += 1;
    console.log(arr[i]);
} while (i < arr.length - 1);
// 1,2,3,4,5
-> undefined

while statement

let arr = [1, 2, 3, 4, 5];
let i = -1;
while (i < arr.length - 1) {
    i += 1;
    console.log(arr[i]);
}
// 1,2,3,4,5
-> undefined

for…of statement

let arr = [1, 2, 3, 4, 5];
for (let i of arr) {
    console.log(i);
}
// 1,2,3,4,5
-> undefined

for…in statement

let arr = [1, 2, 3, 4, 5];
for (let i in arr) {
    console.log(arr[i]);
}
// 1,2,3,4,5
-> undefined

A quick disclaimer for for…in statements. The loops we have been using are primarily used to iterate over iterable objects, such as arrays. Although the code above is completely valid, there is a general acceptance of a difference of when to use for…in and when to use for…of. I’ll let MDN explain…

Both for...in and for...of statements iterate over something. The main difference between them is in what they iterate over.

The for...in statement iterates over the enumerable properties of an object, in an arbitrary order.

The for...of statement iterates over values that the iterable object defines to be iterated over.

— MDN

Basically, don’t use for…in to iterate over an Array when the index order is important.

That about sums up various ways to repeat code using loops! Hope this was insightful for you new coders out there.

Happy coding 🤓