Benchmark: Map iteration comparing

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));

Tests:

Map - for of kv
let total = 0; for (const [key, value] of map) { total += value; }
Map - forEach
let total = 0; map.forEach(function(value, key) { total += value; });
Map - while on iterator
let total = 0; const itr = map.entries(); let entry = itr.next(); while( !entry.done) { total+= entry.value.value; entry = itr.next(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map - for of kv
Map - forEach
Map - while on iterator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Map - for of kv	1697903.1 Ops/sec
Map - forEach	1263088.8 Ops/sec
Map - while on iterator	1454957.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):

LLMs can make mistakes. Check important info.

The benchmark in question is designed to compare different methods of iterating through a JavaScript `Map` object and measuring their execution performance.

### Options Compared

1. **For...of Loop** (`Map - for of kv`)
   ```javascript
   let total = 0;
   for (const [key, value] of map) {
       total += value;
   }
   ```
   - **Description**: This method utilizes the `for...of` loop to directly iterate over the key-value pairs of the `Map`.
   - **Pros**: 
     - Clear and readable syntax.
     - Does not require additional function calls or wrappers.
     - Efficient for simple iteration over `Map` entries.
   - **Cons**: 
     - May not be as flexible for complex operations that require more contextual information beyond just key and value.

2. **Map.prototype.forEach** (`Map - forEach`)
   ```javascript
   let total = 0;
   map.forEach(function(value, key) {
       total += value;
   });
   ```
   - **Description**: This method uses the `forEach` method available on `Map`, which takes a callback function to process each entry.
   - **Pros**: 
     - Allows the use of inner functions, which may help in readability and separation of logic.
     - The context (`this` value) can be easily maintained.
   - **Cons**: 
     - Involves a function call for each entry, which can lead to overhead and potentially slower performance compared to direct iteration methods.
     - Less intuitive for those unfamiliar with the callback pattern.

3. **Manual Iterator with `while`** (`Map - while on iterator`)
   ```javascript
   let total = 0;
   const itr = map.entries();
   let entry = itr.next();
   while (!entry.done) {
       total += entry.value[1];
       entry = itr.next();
   }
   ```
   - **Description**: This method manually creates an iterator from the `Map` using the `entries()` method and uses a `while` loop to iterate through the entries.
   - **Pros**: 
     - Provides a granular level of control over iteration, allowing for complex operations during traversal.
     - Can be adaptable for scenarios where you may want to break out of the loop based on a condition.
   - **Cons**: 
     - More verbose and less readable than the other methods.
     - Involves additional variable management and might be less efficient due to manual control flow.

### Performance Results

The benchmark results reveal the number of executions per second for each iteration method using Chrome 135 on a Windows desktop:

- **For...of Loop**: 1,697,903.125 executions/second (fastest)
- **While on Iterator**: 1,454,957.0 executions/second (second fastest)
- **forEach Method**: 1,263,088.75 executions/second (slowest)

### Considerations

- Generally, the `for...of` loop appears to be the fastest option for iterating over `Map` entries, making it a strong choice for performance-sensitive code.
- The `forEach` method, while more flexible in some cases, incurs a performance penalty due to the overhead of invoking the callback for each entry.
- If code readability and maintainability are significant concerns, developers may choose to use the method that they find most understandable, provided performance is within tolerable limits.

### Other Alternatives

1. **Traditional `for` Loop**: Although less idiomatic with `Map`, one could convert the `Map` entries into an array using `Array.from(map.entries())` and use a traditional `for` loop, but this typically incurs a performance hit and is not recommended for performance benchmarks.
  
2. **Array methods**: One could also convert a `Map` to an array and use methods like `map`, `reduce`, or `filter`, but this would introduce additional overhead and complexity.

In summary, the benchmark compares three commonly used methods for iterating over a JavaScript `Map`, discussing their advantages and drawbacks, and performance implications within a specific browser context.

Related benchmarks:

Map iteration comparing (version: 1)

Comparing performance of: Map - for of kv vs Map - forEach vs Map - while on iterator

Created: 3 days ago by: Registered User

Jump to the latest result

Map - for of kv

Map - forEach

Map - while on iterator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):