Which Is the Fastest: While, For, forEach(), For…of?

I’m not a full-time developer, and so I rely on my foundational knowledge to carry me through projects that require writing code. I was pretty excited when I found out about JavaScript’s .forEach() method as a replacement to traditional for loops. However, I was kindly reprimanded for not staying up-to-date with the latest JavaScript has to offer — referring to the for…of loop.

According to those who commented on my previous article, the for...of technique is superior in speed and readability to .forEach(). Since I don’t write larger-scale applications where processing time really comes into play, I was curious to find something out. Just how fast (or slow) is each type of iteration structure?

So I decided to test things out and share my results.

Loop Primer

Before we get started, let’s do a 30-second recap on the different types of iteration structures.

• While Loop: The simplest of the looping mechanisms. A while loop will execute as long as the given expression evaluates to true.
• For Loop: An iteration structure that’s useful when the number of iterations is known. A for loop’s declaration has three components: initialization of a variable, expression to determine if the loop will end, and a statement that’s executed at the end of each iteration.
• .forEach() Method: A method of the array class that takes a single argument, which is a function, and performs that function with every element within the array.
• For…of Loop: The most recently added of the iteration structures, this statement requires specifying a temporary variable name that each element in the array will be assigned to as it’s iterated over.let arr = [];// while loop
  let i=0;
  while(i < arr.length) {
   // do stuff
   i++;
  }// for loop
  for(let i=0; i<arr.length; i++) {
   // do stuff
  }// .forEach() method
  arr.forEach((element) => {
   // do stuff
  });// for...of loop
  for(const element of arr) {
   // do stuff
  }

Test Scenario

To test the speed of each loop, I created arrays of 10, 100, 1,000, and 1,000,000 integers. Within each loop, no calculation was performed. The two methods, console.time() and console.timeEnd(), were used to report on the speed of each technique.

Results

The results were quite interesting and not what I was expecting. All the times are in milliseconds.

Here are some of my main takeaways from this exercise:

• while loops scale the best for large arrays.
• for...of loops are hands down the fastest when it comes to small data sets, but they scale poorly for large data sets.
• .forEach() and for...of were close enough that neither side should hang their hat on performance alone over the other.
• The execution time of .forEach() is dramatically affected by what happens inside each iteration.
• Standard for loops were mediocre across the board.

I’m sure that varying the test cases would provide deeper insight. However, as someone who doesn’t live or die by the fraction of a millisecond, this was enough to satisfy my curiosity.

Let me know what you think in the comments below. Do you have a use case where one method far outperforms the others? How do you decide which iteration structure to use?