I knew that loops were a thing. Fruit loops, the movie Looper, and Loop Industries. I knew that they helped and that they made life good. However, I wasn’t clear on all the types of loops as a developer. So, per my love of deep dives on topics, loops!

Photo by Isabella and Louisa Fischer on Unsplash

There are several types of loops and they each do something different-

  • for
  • for .. of
  • for.. in
  • while
  • do… while
  • forEach
  • Map

If we wanted to console.log(‘Loop’) 5 times without using a loop, we would need to write. As you could guess, this is very inefficient and where loops come into play.

For

To initialize this type of loop, see the code below. In this type of loop, you would initialize it with i = 0 as our starting counter. Then give the conditional as to how long this loop will go. Finally, we add to our counter with i++.

This then runs 5 times! Yay!

console.logging our loops
console.logging our loops

If we wanted to see this in action we can add + i to our console.log

This loops over each console.log 5 times. This runs 5 times as that is the number we set it to go to.

console.logging loops
console.logging loops

We can also decrement in the same way!

And we now see that this will count backwards.

Decrementing loop
Decrementing loop

A common use for loops is sorting through an array. We must add the names with [i] if we want to extract each individual name from the array.

for(let i= 0; i <names.length; i++){
console.log(names[i]);
}

If we don’t add [i] we select the array of names 4 times

4 sets of the arrays
4 sets of the arrays

For…of

For of loops, this is the basic syntax of this loop. Do note that in terms of speed, for.. of is slower than a for loop.

An example of this is the following. The next loop is deconstructing the array “names”. This takes a name (which can be anything, aka banana) and loops through the array we are calling.

for (name of names){
console.log(name)
}
List of names
List of names

A way to simplify this further would be to write this entire statement on one line and this will do the exact same thing.

For.. in

While we could use a for… of loop for objects, this time we will use a for in loop. For this “key” is a banana and can be considered anything while “user” is the object we are referencing. Note in our console.log we are using user[key]

for(key in user)console.log(user[key])
John Doe
John Doe

While loop

First, we declare our counter outside the loop, then set up the rest of the loop, be sure to increment within this loop or it will run forever and lock up your browser.

while (i < 10){
console.log(i)
i++}

We can see that it runs 10 times

0–9
0–9

We can also add a break within this loop if we wanted to escape early if a condition is met. So this will log until five.

while (i < 10){
console.log(i)
i++
if (i === 5) break;
}

Do… While

While very similar to a while statement, the main difference is that in the first run of do, it will always run the first time before it checks the conditional. So if i were equal to 0 it would still print 1 as it has not run the conditional logic.

do {
i++
console.log(i)
}while (i < 10)

forEach()

This is a high order array sorting method. This does the same as the other loops discussed but it is simplified and less prone to bugs.

animals.forEach(animal = >{
console.log(animal)
})

Closing

If you have any questions or corrections feel free to ask. Hopefully you now better understand loops!

I work as a UX Designer. I adore games (video and board), learning, travel, and personal wellness.