DEV Community

Cover image for JavaScript: Do you know the fastest way to iterate over arrays, objects?
Rahul Banerjee
Rahul Banerjee

Posted on • Updated on • Originally published at realpythonproject.com

JavaScript: Do you know the fastest way to iterate over arrays, objects?

There are multiple ways to iterate over an array or objects in JavaScript but do you the fastest way? Let's find out the fastest way in this article.

Arrays

The different ways we will consider

  • Map
  • ForEach
  • For....In
  • For...Of
  • For Loop (Normal / Reverse)
  • For Loop with length caching (Normal / Reverse)
  • While Loop (Normal / Reverse)
  • While Loop with length caching

NOTE: I am using Node.js in https://replit.com/~

How will we measure the performance?

Using perf-hooks.

const {performance} = require('perf_hooks')

var numbers = []
for (var i = 0; i < 1000000; i++){
    numbers.push(i)
}

s1 = performance.now()

for (var iterationNumber = 0 ; iterationNumber < 10; iterationNumber++){
    /*
        A method to iterate over the array numbers
    */
}

s2 = performance.now()
console.log(`On average it took ${(s2 - s1)/10} ms`)
Enter fullscreen mode Exit fullscreen mode
  • Create an array with 1,000,000 elements
  • Get time using performance.now()
  • Iterate over the array numbers using one of the previously discussed methods. This will be done 10 times.
  • Get the time again using performance.now()
  • Find the difference in both the times and divide by 10 to get the average duration.

By Iterating over an array, I mean accessing the values.

Method1: Map

numbers.map( num => num )
/*
OUTPUT
On average it took 16.208858299255372 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method2: ForEach

numbers.forEach( num => num )
/*
OUTPUT
On average it took 10.285145807266236 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method3: For..in

for (num in numbers) { 
        num
    }
/*
OUTPUT
On average it took 121.6859667301178 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method4: For....of

for (num of numbers) { 
        num
    }
/*
OUTPUT
On average it took 6.2104291915893555 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method5: For Loop (Normal/Reverse)

Normal

for (var num = 0; num < numbers.length; num++) { 
        numbers[num]
    }
/*
OUTPUT
On average it took 1.6166291236877441 ms
*/
Enter fullscreen mode Exit fullscreen mode

Reverse

    for (var num = numbers.length; num >= 0 ; num--) { 
        numbers[num]
    }
/*
OUTPUT
On average it took 1.717929220199585 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method6: For Loop with length caching

Normal

    const length = numbers.length
    for (var num = 0; num < length ; num++) { 
        numbers[num]
    }
/*
OUTPUT
On average it took 1.5916707992553711 ms
*/
Enter fullscreen mode Exit fullscreen mode

Reverse

    const length = numbers.length
    for (var num = length; num >= 0 ; num--) { 
        numbers[num]
    }
/*
OUTPUT
On average it took 1.661899995803833 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method7: While Loop (Normal / Reverse)

Normal

    var num = 0
    while (num < numbers.length) { 
        numbers[num]
        num+=1
    }
/*
OUTPUT
On average it took 1.937641716003418 ms
*/
Enter fullscreen mode Exit fullscreen mode

Reverse

    var num = numbers.length
    while (num > 0) { 
        numbers[num]
        num-=1
    }
/*
OUTPUT
On average it took 1.802162504196167 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method8: While Loop with length caching

    const length = numbers.length
    var num = 0
    while (num < length) { 
        numbers[num]
        num+=1
    }
/*
OUTPUT
On average it took 1.8967833995819092 ms
*/
Enter fullscreen mode Exit fullscreen mode

Comparing the different ways to iterate over an array

JSARRAY.png

As you can see using a for loop with length caching is the fastest way to iterate over an array. However, this depends on the browser (if you are running it in a browser), your system, etc. That said, there is a noticeable performance gain when using for/while loop as compared to for...in, forEach, or map.

Objects

Below are the different ways we will consider

  • For...in
  • Object.entries
  • Object.values
  • Object.keys
  • Object.getOwnPropertyNames

How will we measure the performance?

We use the same method we use the measure the performance above. However, instead of an array of 1,000,000 elements, we will iterate over an object of 1,000,000 elements

var dictionary = {}
for (var i = 0; i < 1000000; i++){
    dictionary[String(i)] = i 
}
Enter fullscreen mode Exit fullscreen mode

By Iterating over an object, I mean accessing the values.

Method1: For....in

    for (key in dictionary){
        dictionary[key]
    }
/*
OUTPUT
On average it took 120.43710422515869 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method2: Object.entries

    Object.entries(dictionary).forEach(
        pair => pair[1] 
    )
/*
OUTPUT
On average it took 309.78367910385134 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method3: Object.values

    Object.values(dictionary).forEach(
        value => value 
    )
/*
OUTPUT
On average it took 15.095704174041748 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method4: Object.keys

    Object.keys(dictionary).forEach(
        key => dictionary[key] 
    )
/*
OUTPUT
On average it took 124.35768752098083 ms
*/
Enter fullscreen mode Exit fullscreen mode

Method5: Object.getOwnPropertyNames

    Object.getOwnPropertyNames(dictionary).forEach(
        key => dictionary[key] 
    )
/*
OUTPUT
On average it took 223.96972498893737 ms
*/
Enter fullscreen mode Exit fullscreen mode

Comparing the Different ways to iterate over an object

jsObject.png

There is an error in the Image above. In the last row, it shouldn't be 1.8 ms. It should be 223ms as stated in the code comments.

Again there performance might depend on various factors. However, there is a noticeable performance gain when using Object.values as compared to Object.entries


Connect with me on LinkedIn, Twitter

Top comments (1)

Collapse
 
framemuse profile image
Valery Zinchenko

Method3: Object.values is wrong since it doesn't have object access, which makes it to perform way better