Javascript for loop

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

This content was originally published at
https://www.blog.duomly.com/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:
var counter = 1000;
var t0 = performance.now();
for (let i = 0; i < counter; i++) {
}
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);
Chrome Firefox Safari
154.41 ms 243.56 ms 13 ms

array.forEach((item, index) =>
{ console.log(‘www.duomly.com’); });
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.
156.41 ms 180 ms 12 ms

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) {
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;
while(i < counter) {
i++;
}
console.log(“While…loop ” + (t1 – t0) + ”
milliseconds.”);
Test result:
156.46 ms 243.60 ms 18 ms

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 {
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 counter = 1000;
var i = 0;
do {
i++;
} while (i < counter);
console.log(“Do…while loop ” + (t1 – t0) + ”
milliseconds.”);
Test result:
116.19 ms 189.71 ms 18 ms

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)
}

Javascript loop performance test 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.
Loop type Time in m/s
for…loop 154.41 ms
forEach() 156.46 ms
while…loop 156.46 ms
do…while loop 116.19 ms

Conclusion for Javascript for loop
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!

Table of contents:
• for…loop and .forEach()
• while…loop
• do…while loop
• for…in loop
• for…of loop
• Performance summary
• Conclusion

Javascript for loop

More Related Content

Javascript for loop