Benchmark: Iteration Array for-of vs Map for-of 4

Script Preparation code:

var obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
  f: 6,
  g: 7,
  h: 8,
  i: 9,
  j: 10,
  k: 11,
  l: 12,
  m: 13,
  n: 14,
  o: 15,
  p: 16,
  q: 17,
  r: 18,
  s: 19,
  t: 20,
  u: 21,
  v: 22,
  w: 23,
  x: 24,
  y: 25,
  z: 26
};
var map = new Map(Object.entries(obj));

var array = [
  ["a", 1], 
  ["b", 2], 
  ["c", 3], 
  ["d", 4], 
  ["e", 5], 
  ["f", 6], 
  ["g", 7], 
  ["h", 8], 
  ["i", 9], 
  ["j", 10], 
  ["k", 11], 
  ["l", 12], 
  ["m", 13], 
  ["n", 14], 
  ["o", 15], 
  ["p", 16], 
  ["q", 17], 
  ["r", 18], 
  ["s", 19], 
  ["t", 20], 
  ["u", 21], 
  ["v", 22], 
  ["w", 23], 
  ["x", 24], 
  ["y", 25], 
  ["z", 26], 
];

​x
 
var obj = {  a: 1,  b: 2,  c: 3,  d: 4,  e: 5,  f: 6,  g: 7,  h: 8,  i: 9,  j: 10,  k: 11,  l: 12,  m: 13,  n: 14,  o: 15,  p: 16,  q: 17,  r: 18,  s: 19,  t: 20,  u: 21,  v: 22,  w: 23,  x: 24,  y: 25,  z: 26};var map = new Map(Object.entries(obj));​var array = [  ["a", 1],   ["b", 2],   ["c", 3],   ["d", 4],   ["e", 5],   ["f", 6],   ["g", 7],   ["h", 8],   ["i", 9],   ["j", 10],   ["k", 11],   ["l", 12],   ["m", 13],   ["n", 14],   ["o", 15],   ["p", 16],   ["q", 17],   ["r", 18],   ["s", 19],   ["t", 20],   ["u", 21],   ["v", 22],   ["w", 23],   ["x", 24],   ["y", 25],   ["z", 26], ];​

Tests:

Array for-of

let total = 0;
for(const item of array){
	total += item[1];
}

 
let total = 0;for(const item of array){    total += item[1];}

Map for-of

let total = 0;
for (const [key, value] of map) {
	total += value;
}

 
let total = 0;for (const [key, value] of map) {    total += value;}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Array for-of
Map for-of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Linux

View result in a separate tab

Test name	Executions per second
Array for-of	8235080.5 Ops/sec
Map for-of	3917427.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's dive into the explanation of what's being tested on this benchmark.

The provided JSON represents two test cases that compare the performance of iterating over an array using for...of and Map.for...of. Both approaches are designed to iterate over the same data, but they differ in how they access the elements.

Array for-of

In this approach, we have a nested array [["a", 1], ["b", 2], ...]. The for...of loop iterates over each inner array and assigns it to a constant item. Then, inside the loop, we access the second element of the array (item[1]) using indexing.

Map for-of

In this approach, we have a Map object created from an object using Object.entries(). The for...of loop iterates over each key-value pair in the map and assigns it to a constant [key, value]. Then, inside the loop, we access the second element of the array (value) using indexing.

Now, let's discuss the pros and cons of each approach:

Array for-of

Pros:

More intuitive and easier to understand for developers familiar with arrays.
Can be more efficient for small arrays or arrays where the inner elements are accessed in a specific order.

Cons:

Requires explicit indexing (item[1]) which can lead to errors if not used carefully.
May be slower for large arrays due to the overhead of creating an array and iterating over it.

Map for-of

Pros:

More memory-efficient, as only the key-value pairs are stored in the map.
Can be faster for large datasets, as the iteration is more efficient and doesn't require explicit indexing.

Cons:

May be less intuitive for developers unfamiliar with maps or for...of on objects.
Requires knowledge of how to iterate over a map using for...of.

Other considerations:

The JavaScript engine used by Chrome 129 in this benchmark has some optimizations that might affect the performance difference between these two approaches. For example, some engines might use SIMD instructions (Single Instruction, Multiple Data) for array iteration, which can be faster.
The size of the dataset in this benchmark is relatively small, so the benefits of using a map might not be as noticeable. However, for larger datasets, the performance difference between these two approaches should become more apparent.

The alternative to using for...of on arrays or maps is to use traditional indexing (array[i] or map[key]) instead. This approach can be faster for small arrays but may lead to errors and less readability.

As an example of special JS feature, note that the Object.entries() method returns an array-like object containing a key-value pair as an array with two elements: [key, value].

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's being tested on this benchmark.

The provided JSON represents two test cases that compare the performance of iterating over an array using `for...of` and `Map.for...of`. Both approaches are designed to iterate over the same data, but they differ in how they access the elements.

**Array for-of**

In this approach, we have a nested array `[["a", 1], ["b", 2], ...]`. The `for...of` loop iterates over each inner array and assigns it to a constant `item`. Then, inside the loop, we access the second element of the array (`item[1]`) using indexing.

**Map for-of**

In this approach, we have a `Map` object created from an object using `Object.entries()`. The `for...of` loop iterates over each key-value pair in the map and assigns it to a constant `[key, value]`. Then, inside the loop, we access the second element of the array (`value`) using indexing.

Now, let's discuss the pros and cons of each approach:

**Array for-of**

Pros:

* More intuitive and easier to understand for developers familiar with arrays.
* Can be more efficient for small arrays or arrays where the inner elements are accessed in a specific order.

Cons:

* Requires explicit indexing (`item[1]`) which can lead to errors if not used carefully.
* May be slower for large arrays due to the overhead of creating an array and iterating over it.

**Map for-of**

Pros:

* More memory-efficient, as only the key-value pairs are stored in the map.
* Can be faster for large datasets, as the iteration is more efficient and doesn't require explicit indexing.

Cons:

* May be less intuitive for developers unfamiliar with maps or `for...of` on objects.
* Requires knowledge of how to iterate over a map using `for...of`.

Other considerations:

* The JavaScript engine used by Chrome 129 in this benchmark has some optimizations that might affect the performance difference between these two approaches. For example, some engines might use SIMD instructions (Single Instruction, Multiple Data) for array iteration, which can be faster.
* The size of the dataset in this benchmark is relatively small, so the benefits of using a map might not be as noticeable. However, for larger datasets, the performance difference between these two approaches should become more apparent.

The alternative to using `for...of` on arrays or maps is to use traditional indexing (`array[i]` or `map[key]`) instead. This approach can be faster for small arrays but may lead to errors and less readability.

As an example of special JS feature, note that the `Object.entries()` method returns an array-like object containing a key-value pair as an array with two elements: `[key, value]`.

Related benchmarks:

Iteration Array for-of vs Map for-of 4 (version: 0)

Iteration Array for-of vs Map for-of

Comparing performance of: Array for-of vs Map for-of

Created: 7 months ago by: Guest

Jump to the latest result

Array for-of

Map for-of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):