Different Ways to Loop in JavaScript (explained)

If you have an array or an object in front of you and you don’t know what is the best way to loop through it to get the best result, then, this article is for you.

Very often developers are dealing with arrays, objects, or anything else and their mission is to get the data from it.

But what is the best way to do it since there are plenty of them? Let’s take a look.

👉 For Loop

This one is one of the most used and the most popular. You may have seen it already and here I would like to explain it in some detail.

const fruits = ["apple", "mango", "banana", "orange"];
let list = "";
for (let i = 0; i < fruits.length; i++) {
  list += fruits[i] + "<br>";
}

By using this function you will display the list of the fruits one by one.

We have an array with the list of the fruits, then we declare an empty variable “list” in order to save the result of the loop and display it.

Then we declare an “i “ variable and set it to 0. However, you can set it to any other number that you need. We use the length of the fruit’s array to set the number of looping we want.

So in general, the for loop will make a circle 4 times until it comes to 0 since our “i” is set to this number (if i = 1, the loop would stop at 1).

👉 For In Loop

The for in loop is one of the rare looping functions that is iterating through an object.

Let’s take an example.

const user = {firstname:"John", lastname:"Smith", age:30};
let userInfo = "";
for (let x in user) {
  userInfo+= user[x] + " ";
}

As in the previous example, we “saved” the information from our looping in “userInfo” variable and by using it, we will get the full information from the object.

The result will be: John Smith 30.

Meaning is that our function is looping through an objects and gets each key (x variable) of it.

👉 For Of Loop

It is very easy to make a mistake by using for in loop instead of for of loop and the opposite. What’s the difference between them? Well, the for of loop is iterating though an array, strings, maps and many more.

const fruits = ["apple", "mango", "banana", "orange"];
let list = "";
for (let x of fruits) {
  text += x + "<br>";
}

The principle is the same than the For Loop, you will get the list of the fruits one by one. The difference is that with the For Loop you can set a number of looping but here it is based on the number of elements in your array (means 4 in our example).

If you do not need to set any exact number or conditions, I would advise you to use this kind of looping.

👉 While Loop/Do While Loop

Frankly speaking, since I am working in web development I have never used the while loop but let’s still take a look at it and understand its meaning.

let list= "";
let i = 0;
while (i < 10) {
  list += "<br>The number is " + i;
  i++;
}

In this very example, we are turning inside the loop of number and the result will be “The number is..” and the number of the circle is the loop.

The looping will be done until the condition (i < 10) is true, meaning 10 times.

❗️Attention, while loop can be a bit tricky if the condition is set to true without a limit and it’s exactly here that you can get an Infinite Loop.

let list = ""
let i = 0;
do {
  list += "<br>The number is " + i;
  i++;
}
while (i < 10);

The Do While Loop has the same function than the While Loop with the only difference is that the Do While Loop will execute the function at least one time before starting to check if the condition is true or not.

👉 If you want to get more details about such functions as forEach(), you can check my other article about it with the examples, just here.

I hope it was helpful. Thank you for reading 😊