Benchmarking 'for', 'while', 'for...of', and 'Array.forEach' - using Performance.now()
Tags: javascript, node, frontend, backend
Published: 2023-07-19 13:20:18

Currently, let's talk about looping in JavaScript! As we all know that there several methods to do it. Some of the methods that developers usually use are:

- [For](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
- [While](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while)
- [For...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
- [Array.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

Developers love using `Array.forEach` because it's simple and easy to use. But, have you ever wondered why we have so many options for looping? Why not just get rid of the rest and stick with the best one?

Now, let's do some performance tests using [Performance.now()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)!
<br>
## Benchmarking

Here are the test cases and loops used for benchmarking.

**Test Case**
```javascript
const iterations = ITERATION_TOTAL // 10, 100, 10000, 1000000, 10000000
const myArray = Array.from(Array(iterations).keys())

let total = 0

const start = performance.now()

// Looping method will be here

const end = performance.now()

console.log(`It took ${end - start} ms.`);
```

**For**
```javascript
for (let i = 0; i < myArray.length; i++) {
  total += myArray[i]
}
```

**While**
```javascript
let i = 0

while (i < myArray.length) {
  total += myArray[i]
  i++
}
```

**For...of**
```javascript
for (const item of myArray) {
  total += item
}
```

**Array.forEach**
```javascript
myArray.forEach((item) => {
  total += item
})
```


The tests were run with [Node Js v18.17.0](https://nodejs.org/dist/v18.17.0/docs/api/). Each loop was tested for different iterations: 10, 100, 10,000, 1,000,000, and 10,000,000. I averaged the times I got for each iteration.
<br>
## Result

Here are the results for each loop with those iterations (**the lower the better**):

**10 Iterations**

![Javascript loop 10 iterations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeaw4r310ii0u46855jr.png)

**100 Iterations**

![Javascript loop 100 iterations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myxeboq1cqxe49a40jig.png)

**10,000 Iterations**

![Javascript loop 10000 iterations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coahr187ejgs2qfrxd41.png)

**1,000,000 Iterations**

![Javascript loop 1000000 iterations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s096b1xci53hfckbq7s2.png)

**10,000,000 Iterations**

![Javascript loop 10000000 iterations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6org6tuplqc90tufesu.png)
<br>
## Conclusion
For Frontend stuff, it's all good to use any of the loop methods (`for`, `while`, `for...of`, and `Array.forEach`) because most websites don't usually show more than 10,000 items on a page.

But when it comes to Backend Processing, Code Validation, Linting, etc., `for` and `while` loops are still totally the way to go! 🚀

So, not everything that's cool and easy on the developer side is the best for the project. There might be some trade-offs, you know. ✨