Benchmark: Map for map vs entries.map

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
const arr = []; for (const [key, value] of map) { arr.push(value) }
Map - forEach
const arr = map.entries().map((value) => value);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map - for of kv
Map - forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Map - for of kv	7650188.0 Ops/sec
Map - forEach	58538128.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON evaluates and compares two different methods for accessing and collecting values from a `Map` in JavaScript. Let's break down the details.

### What is Tested

1. **Benchmark Name**: "Map for map vs entries.map"
2. **Preparation Code**: Initializes a JavaScript object with 26 key-value pairs and then converts this object into a `Map` using `Object.entries()`. The `Map` is created from the entries of the object, allowing iterability over its keys and values.

### Test Cases

1. **Test Case 1 - "Map - for of kv"**: 
   - **Benchmark Definition**: It uses a `for...of` loop to iterate over the `Map` and push each value into an array.
   - **Methodology**: Accessing entries using `for...of` directly iterates over the entries, allowing you to work with key-value pairs effectively.

2. **Test Case 2 - "Map - forEach"**:
   - **Benchmark Definition**: It employs the `Map.prototype.entries()` method and utilizes `Array.prototype.map()` to gather values. This version effectively transforms the entries of the `Map` into an array.
   - **Methodology**: `entries()` provides access to an iterator that produces `[key, value]` pairs, and the `map()` is applied to this result.

### Comparison of Options

| Method                     | Execution Results (Executions Per Second) | Pros                                           | Cons                                          |
|----------------------------|--------------------------------------------|------------------------------------------------|-----------------------------------------------|
| **for...of kv**            | 7,950,664.5                               | Clear and straightforward syntax. Efficient for direct value retrieval. | Slightly slower performance in this benchmark context. |
| **forEach**                | 27,370,942.0                              | Higher performance for this use case. Leverages built-in array capabilities. Potentially more concise code for transforming mapped entries. | May be less intuitive for those unfamiliar with functional programming patterns. |

### Pros and Cons

#### **for...of Loop**
- **Pros**:
  - Intuitive, especially for those who are used to traditional looping constructs.
  - Suitable for manipulating each entry directly before potentially gathering results in a custom structure.

- **Cons**:
  - Can be slower than using higher-order array methods when simply transforming data.
  
#### **forEach with entries()**
- **Pros**:
  - Achieves better performance in this benchmark scenario, likely due to optimized internal handling of array methods.
  - More concise in some cases, allowing for functional transformations.

- **Cons**:
  - Requires understanding of functional programming concepts.
  - Creates a temporary array of entries, which may add overhead in memory consumption depending on context.

### Libraries and Special Syntax

No special JavaScript libraries are used in this benchmark. The test cases utilize built-in JavaScript constructs, particularly `Map`, `Object.entries()`, and array methods like `map()` and `forEach()`, which are part of the ECMAScript standard.

### Alternatives

For other alternatives to achieve similar results, developers might consider:

1. **Using `forEach()` Directly on Map**:
   - Example: `map.forEach((value, key) => arr.push(value));`
   - This could be compared with the test cases as a direct way to loop through entries without needing the `entries()` method.

2. **Spreading Into an Array**:
   - Example: `const arr = [...map.values()];`
   - This method creates an array from the values of the `Map` directly using the spread operator, which can be beneficial for scenarios where only values are needed.

3. **Performance Enhancement Libraries**:
   - For advanced scenarios, libraries like Lodash can be utilized for its powerful utility functions, though they may not be necessary given the simplicity of the operations being performed here.

### Conclusion

This benchmark provides an excellent insight into different approaches for iterating over Map structures in JavaScript. While the `for...of` loop offers straightforward syntax, `forEach()` and its associated methods can deliver superior performance, making it important for developers to choose an approach based on their specific use case and familiarity with JavaScript's functional programming features.

Related benchmarks:

Map for map vs entries.map (version: 0)

Comparing performance of: Map - for of kv vs Map - forEach

Created: 2 months ago by: Guest

Jump to the latest result

Map - for of kv

Map - forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):