DEV Community

Lane Wagner
Lane Wagner

Posted on • Originally published at qvault.io on

Benchmarking Array Traversal in Javascript – Going Backwards is Fastest

There are many ways to traverse an array in Javascript. In this benchmark, we will look at five different ways and the pros and cons of each. Keep in mind that these benchmarks were run in a Chrome browser on Codepen. Results will vary by browser/interpreter.

For a working example of these benchmarks, take a look at this codepen: https://codepen.io/lane-c-wagner/pen/GRRGryr. All benchmarks we ran on an array of 1000000000 items.

1st: Vanilla JS – Backwards

for (let i = arr.length-1; i>=0; i--){}
Enter fullscreen mode Exit fullscreen mode

~ 30 milliseconds

Going backwards is faster than going forward! This is because at each iteration the loop checks against a constant 0 zero value instead of calling the array’s .length property. Doesn’t mean you should do it though… its weird and hard to follow cognitively.

2nd: Vanilla JS – Forwards

for (let i = 0; i< arr.length; i++){}
Enter fullscreen mode Exit fullscreen mode

~39 milliseconds

3rd: ES6 forEach()

arr.forEach(function(element) {});
Enter fullscreen mode Exit fullscreen mode

~180 milliseconds

Slow but with a more convenient syntax, nothing surprising here.

4th: jQuery Each

$.each(arr, function( index, value ) {});
Enter fullscreen mode Exit fullscreen mode

~225 milliseconds

Eeeeeew… jQuery. Convenient if you live in 2010. Very Slow.

Wildcard: For..Of ES6


for (const item of arr){}
Enter fullscreen mode Exit fullscreen mode

First and second time running: 153 Milliseconds

Third+ times running : ~18 milliseconds

This is weird, and I’m not sure how to explain it. Maybe someone smarter than me can tweet me the answer @wagslane . The first two times running this after a fresh browser load are quite slow, but then it gets blazingly fast. I’m assuming there are some es6 optimizations under the hood that kick in.

By Lane Wagner @wagslane

Download Qvault: https://qvault.io

Star our Github: https://github.com/q-vault/qvault

The post Benchmarking Array Traversal in Javascript – Going Backwards is Fastest appeared first on Qvault.

Top comments (0)