Learn the coding skills for your next job

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.io. Results will vary by browser/interpreter.

For a working example of these benchmarks, take a look at this codepen. All benchmarks we ran on an array of 1,000,000,000 items.

Learn JavaScript by writing real code

We’ll have you writing real code within 2 minutes of joining us! You’ll learn all tools and skills you need to have a successful JavaScript career. You’ll even code pieces of your own adventure game and build beautiful animations.

1st: Vanilla JS – Backwards

for (let i = arr.length-1; i>=0; i--){}
Code language: JavaScript (javascript)

~ 30 milliseconds

Going backwards is faster than going forward! At each iteration the loop checks against a constant 0 zero value instead of calling the array’s .length property. I highly recommend NOT putting this optimization into practice however, it’s weird and results in hard to understand code.

2nd: Vanilla JS – Forwards

for (let i = 0; i< arr.length; i++){}
Code language: JavaScript (javascript)

~39 milliseconds

3rd: ES6 forEach()

arr.forEach(function(element) {});
Code language: JavaScript (javascript)

~180 milliseconds

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

4th: jQuery Each

$.each(arr, function( index, value ) {});
Code language: JavaScript (javascript)

~225 milliseconds

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

Wildcard: For..Of ES6

for (const item of arr){}
Code language: JavaScript (javascript)

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.

Related JS Articles

Trying to find your next programming job?

If you are a self-taught developer having trouble finding your first programming job, we've got your back! We have the learning resources and tight-knit dev community that you need to land the coding job you've been looking for. To get started, create a free account and join our Discord community.

Have questions or feedback?

If we've made a mistake in the article, please let us know so we can get it corrected!