For Loop, While Loop, Do…while Loop and Other JavaScript Loops – Comparison and Performance

Loops play an essential role in software development, and they are used to iterate through the arrays or other elements that are iterable. In Javascript, we have a few different types of loops. It sometimes can be confusing which loop we should use in a particular case and which one will be the best in case of our performance. In this article, I’m going to compare the loops in Javascript, describe their pros and cons, test the speed of each of them.

for…loop and .forEach()

The most common loop in Javascript and the most used one, it loops through the block of code specified number of times. Let’s take a look at the code syntax of for…loop:

for (let i = 0; i <= 20; i++) {
  console.log(‘www.duomly.com’);
}

It consists of three elements, divided by semicolons. At first, we need to initialize the variable which starts the loop with the initializer:

let i = 0;

next element is the test condition, which checks how many times the code will be executed:

i <= 20;

and the last element is updater, which is called at the end of each iteration to increase or decrease the counter of the loop. This loop is very flexible, we can run it at any point we decide and also stop it at any point, and it’s not very difficult to understand as well. The cons of for…loop are that it’s not suitable for any kind of data, and if you don’t understand it well, it’s easy to mess up. Performance: Now let’s simply test the speed of the for…loop in different browsers. I’m going to invoke the following code in Chrome, Safari, and Firefox to check the speed of the loop:

Performance: Now let’s simply test the speed of the for…loop in different browsers. I’m going to invoke the following code in Chrome, Safari, and Firefox to check the speed of the loop:

var counter = 1000;
var t0 = performance.now();
for (let i = 0; i < counter; i++) {
  console.log(‘www.duomly.com’);
}
var t1 = performance.now();
console.log(“For…loop ” + (t1 – t0) + ” milliseconds.”);

Test result:

In the case of for…loop, it’s also worth to mention that it can be exchanged with .forEach() array method. Let’s take a look at how it works:

var array = [10, 20, 30, 40];
array.forEach((item, index) => {
  console.log(item);
});

As you can see in the above example, .forEach() method also iterated through an array, but here we don’t specify condition or updater, here we are iterate through the given array, and we can return every item. Let’s check the performance of this method:

var array = Array.from(Array(1000).keys(), n => n + 1);
var t0 = performance.now();
array.forEach((item, index) => { console.log(‘www.duomly.com’); });
var t1 = performance.now();
console.log(“.forEach() ” + (t1 – t0) + ” milliseconds.”);

Test result:

As a result of our test, we can see that, .forEach method is faster in Firefox and Safari browser, but in Chrome it takes about 3ms more.

while…loop

While…loop is very similar to for…loop is used to repeat the block of code until the condition is false. When executing while loop the condition is evaluated first so, there is a chance that the block of code won’t be called at all if the condition will be false at first iteration. Let’s take a look at the while loop syntax:

var counter = 20;
var i = 0;
while (i < counter) {
  console.log(‘www.duomly.com’);
  i++
}

The while loop also consists of test condition, code to execute, and updater. The main advantage of while loop is that it can run a long time until the condition is met, but on the other hand it’s very easy to forget that if we don’t provide the condition which will have the false result finally there will be an infinite loop and will cause the freeze of the application. Performance: Let’s take a look at how fast while loop can be. Again I’m going to test it on Chrome, Firefox, and Safari based on the below code:

var counter = 1000;
var i = 0;
var t0 = performance.now();
while(i < counter) {
  console.log(‘www.duomly.com’);
  i++;
}
var t1 = performance.now();
console.log(“While…loop ” + (t1 – t0) + ” milliseconds.”);

Test result:

do…while loop

Do…while is another kind of loop, which works almost the same as while loop, but there is one small difference, at first the block of code is executed, and then the condition is checked. Let’s take a look at the syntax of do while loop:

var counter = 1000;
do {
  console.log(‘www.duomly.com’);
  i++;
} while (i < counter);

As you can see in the code snippet above, first we have the code to execute, and it will be run at least once, before the first condition check. Inside do{} we also have the updater and below there is a condition test. The biggest advantage of this loop is that the code may be executed at least once even if the condition is already false. Performance: Let’s test the speed of another popular Javascript loop. Again I’m going to test it on the three browsers, Chrome, Firefox and Safari with the code below:

var t0 = performance.now();
var counter = 1000;
var i = 0;
do {
  console.log(‘www.duomly.com’);
  i++;
} while (i < counter);
var t1 = performance.now();
console.log(“Do…while loop ” + (t1 – t0) + ” milliseconds.”);

Test result:

for…in loop

For…in loop is another for loop in Javascript which allows iterating though object properties and the block of code will be executed once per each property. Let’s take a look at the code example:

var person = {
  name: ‘Peter’,
  age: 19,
  city: ‘London’,
}for (let item in person) {
  console.log(‘key: ‘, item, ‘value: ‘, person[item]);
}

As you can see at the example, the code in the loop is invoked as many times as many properties we have in the object. There is no updater and condition test in this kind of loop. The big advantage of this loop is the possibility to iterate through the object what is not possible with other loops.

for…of loop

For…of loop is a new loop introduced with ES6, and it also allows to iterate thought the iterable collections which are objects with [Symbol.iterator] Property. It can be used with arrays or string. Let’s take a look at the code example:

var string = ‘Duomly’;for (let char of string) {
  console.log(char)
}

Performance summary

In the article, I tested the performance of three popular loops and one array method, for loop, while loop, do while loop and .forEach() method. I tested it with similar code to execute, the same amount of executions and in three different browsers. Let’s now take a look and the summary of all the data we got.

All loops were tested in Chrome browser. As we can see in the table do…while loop is the fastest one. For loop is the second fastest and it seems that .forEach() method is the slowest one in a testing environment.

Conclusion

In this article, I described five different loops available in Javascript programming language and tested the performance of three of them. The other two loops work in a different way, so the comparison wouldn’t be reliable. Usage of the loops is very common in software development, but as developers, we need to remember about proper implementation and avoiding nesting loops because it has a bad impact on performance. Also, in case of while loop, it’s important to pay attention to the condition which needs to be false at some point to not break the code. Be careful with your loops and have a nice coding.

Thank you for reading!