Learn back-end development by writing real code

Boot.dev Blog ยป Javascript ยป Which Method of Iteration in JavaScript Is Fastest?

Which Method of Iteration in JavaScript is Fastest?

By Lane Wagner on Nov 8, 2019

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.

1st: Vanilla JS - Backwards

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

~ 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++){}

~39 milliseconds

Get a back-end job without spending $10k on a bootcamp

  • Learn Python, Javascript and Go
  • Build the professional projects you need to land your first job
  • Spend about 6 months (when done part-time)
  • Pricing as low as $24/month*
  • No risk. Cancel anytime.

3rd: ES6 forEach()

arr.forEach(function(element) {});

~180 milliseconds

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

4th: jQuery Each

$.each(arr, function( index, value ) {});

~225 milliseconds

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

A simple path to your career in back-end development

The pace of Boot.dev's JavaScript, Python and Go courses has been perfect for me. The diverse community in Discord is a blast, and other members are quick to help out with detailed answers and explanations.

- Daniel Gerep from Cassia, Brasil

Wildcard: For..Of ES6

for (const item of arr){}

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.

Learn back-end without spending $10,000

  • Write modern code in JavaScript, Python and Go
  • Build and deploy real backend projects to your personal portfolio
  • Compete in the job market by mastering computer science fundamentals

Find a problem with this article?

Report an issue on GitHub