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

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 = [
  [1], 
  [2], 
  [3], 
  [4], 
  [5], 
  [6], 
  [7], 
  [8], 
  [9], 
  [10], 
  [11], 
  [12], 
  [13], 
  [14], 
  [15], 
  [16], 
  [17], 
  [18], 
  [19], 
  [20], 
  [21], 
  [22], 
  [23], 
  [24], 
  [25], 
  [26], 
];

Tests:

Array for-of
let total = 0; for(const item of array){ total += item[0]; }
Map for-of
let total = 0; for (const [key, value] of map) { total += value; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
Array for-of	4340558.0 Ops/sec
Map for-of	1036405.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down what's being tested in this benchmark, compare the different approaches, and discuss their pros and cons.

**Benchmark Definition:**

The benchmark is comparing two ways to iterate over an array using the `for...of` loop:

1. **Array for-of**: Iterating directly over the 2D array using the `for...of` loop.
2. **Map for-of**: Using a `Map` object created from the 2D array's entries.

**Benchmark Preparation Code:**

The script creates a large 2D array and a corresponding `Map` object from its entries. The array has 26 rows, each containing an array of numbers.

```javascript
var obj = {
  // ...
};

var map = new Map(Object.entries(obj));
```

**Individual Test Cases:**

There are two test cases:

1. **Array for-of**: Iterating directly over the 2D array using the `for...of` loop.
```javascript
let total = 0;
for (const item of array) {
  total += item[0];
}
```
2. **Map for-of**: Using a `Map` object created from the 2D array's entries.
```javascript
let total = 0;
for (const [key, value] of map) {
  total += value;
}
```

**Comparison:**

The two approaches differ in how they iterate over the data:

* **Array for-of**: Iterates directly over each inner array in the 2D array.
* **Map for-of**: Iterates over the key-value pairs in the `Map` object, where each key is an index and the value is an array of numbers.

**Pros and Cons:**

1. **Array for-of**:
	* Pros:
		+ Direct iteration can be faster since it avoids the overhead of creating a `Map` object.
		+ Can take advantage of caching mechanisms in browsers for arrays.
	* Cons:
		+ May not be as efficient for large datasets since it iterates over each inner array individually.
		+ Requires explicit bounds checking to avoid indexing errors.
2. **Map for-of**:
	* Pros:
		+ More concise and expressive code, as the `for...of` loop handles the iteration internally.
		+ Can take advantage of caching mechanisms in browsers for maps.
	* Cons:
		+ May be slower due to the overhead of creating a `Map` object and iterating over its key-value pairs.
		+ Requires explicit bounds checking to avoid errors.

**Other Considerations:**

* **Memory usage**: Creating a `Map` object from a large 2D array can consume significant memory. This might impact performance in scenarios where memory is limited.
* **Browser support**: The `for...of` loop has been supported by most modern browsers for several years. However, older browsers may not support it.

**Alternatives:**

For this specific benchmark, the alternatives are:

1. **Using a `forEach` loop**: Instead of using `for...of`, you could use the `forEach` method to iterate over each inner array in the 2D array.
```javascript
array.forEach((row) => {
  total += row[0];
});
```
2. **Using a custom iterator**: You could create a custom iterator for the 2D array and use it with the `for...of` loop.
3. **Using a different data structure**: Depending on the specific requirements of your application, you might consider using a different data structure, such as an object or an array of objects, to store and iterate over your data.

Keep in mind that these alternatives may have different performance characteristics and may not be suitable for all use cases.

Related benchmarks:

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

Iteration Array for-of vs Map for-of

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

Created: one year ago by: Guest

Jump to the latest result

Array for-of

Map for-of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):