Benchmark: Mapping of Map: for of VS destructuring of values

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,
  a1: 27,
  b1: 28,
  c1: 29,
  d1: 30,
  e1: 31,
  f1: 32,
  g1: 33,
  h1: 34,
  i1: 35,
  j1: 36,
  k1: 37,
  l1: 38,
  m1: 39,
  n1: 40,
  o1: 41,
  p1: 42,
  q1: 43,
  r1: 44,
  s1: 45,
  t1: 46,
  u1: 47,
  v1: 48,
  w1: 49,
  x1: 50,
  y1: 51,
  z1: 52,
  a2: 53,
  b2: 54,
  c2: 55,
  d2: 56,
  e2: 57,
  f2: 58,
  g2: 59,
  h2: 60,
  i2: 61,
  j2: 62,
  k2: 63,
  l2: 64,
  m2: 65,
  n2: 66,
  o2: 67,
  p2: 68,
  q2: 69,
  r2: 70,
  s2: 71,
  t2: 72,
  u2: 73,
  v2: 74,
  w2: 75,
  x2: 76,
  y2: 77,
  z2: 78,
  a3: 79,
  b3: 80,
  c3: 81,
  d3: 82,
  e3: 83,
  f3: 84,
  g3: 85,
  h3: 86,
  i3: 87,
  j3: 88,
  k3: 89,
  l3: 90,
  m3: 91,
  n3: 92,
  o3: 93,
  p3: 94,
  q3: 95,
  r3: 96,
  s3: 97,
  t3: 98,
  u3: 99,
  v3: 100
};

var map = new Map(Object.entries(obj));

Tests:

for of
const arr = []; for (const [key, value] of map) { arr.push(value) }
destructuring of values
const arr = [...map.values()].map((value) => value);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
destructuring of values

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark presented compares two methods for mapping values from a JavaScript `Map` object to an array:

1. Using a `for...of` loop.
2. Using the spread operator along with `map()`.

### Explanation of the Options Compared

- **For...of Loop**: 
  ```javascript
  const arr = [];
  for (const [key, value] of map) {
      arr.push(value);
  }
  ```
  In this method, a `for...of` loop iterates over each entry in the `Map`, where each entry is an array consisting of a key-value pair. The `value` is extracted and pushed into an array `arr`.

- **Destructuring with Spread and Map**:
  ```javascript
  const arr = [...map.values()].map((value) => value);
  ```
  This approach first retrieves the values from the `Map` using the `values()` method, spreading them into a new array. Then, the `map()` method applies a transformation (in this case, simply returning the value) to create a new array.

### Pros and Cons of Each Approach

#### For...of Loop
**Pros**:
- More explicit: It's clear what is happening, making the code easy to read.
- Flexibility: You can directly manipulate items while iterating, allowing for more complex operations if needed.

**Cons**:
- Potentially slower: In practice, iterating with `for...of` can be less optimized than the other method, especially in scenarios where performance is critical.

#### Destructuring with Spread and Map
**Pros**:
- Concise: This approach results in cleaner and shorter code.
- Functionally declarative: Using `map()` emphasizes that you are transforming collections of values in a functional style.

**Cons**:
- Potential overhead: Creating an intermediate array with the spread operator might introduce extra performance costs, although this is usually minimal.

### Benchmark Results

From the benchmark results, we see noteworthy performance metrics:
- **Destructuring of values** achieved approximately **1,927,880.5 executions per second**.
- **For...of** loop managed around **967,185.0625 executions per second**.

This indicates that the destructuring method is significantly faster in this scenario.

### Other Considerations

1. **Performance**: The choice between these two methods can depend heavily on the context in which they're used. If you're iterating over a very large `Map`, performance may become more critical.

2. **Readability vs. Performance**: While performance is essential, readability should not be overlooked, particularly in codebases that require maintenance.

3. **Browser Optimization**: The performance can vary across different JavaScript engines or browsers. Always consider testing in the environment relevant to your application.

### Alternatives

Besides the two methods tested, several other alternatives exist for extracting values from a `Map`:

1. **Using `forEach`**:
   ```javascript
   const arr = [];
   map.forEach((value) => arr.push(value));
   ```
   This uses the `forEach()` method of the `Map`, which is semantically clear but can also be slower in execution.

2. **Using `reduce`**:
   ```javascript
   const arr = Array.from(map.values()).reduce((acc, value) => {
       acc.push(value);
       return acc;
   }, []);
   ```
   This method leverages `reduce()` to accumulate values into an array but can be less optimal and more verbose than other methods.

3. **Using `Array.from`**:
   ```javascript
   const arr = Array.from(map.values());
   ```
   This is a straightforward way to create an array from the values in a `Map`, often combining both readability and efficiency.

### Conclusion

In conclusion, the benchmark effectively showcases the performance differences between two common methods of extracting values from a `Map`. While both approaches have their own advantages, the results indicate that using destructuring with the spread operator and `map()` is generally more efficient in this context. Understanding these options allows developers to make informed choices based on the specific needs of their applications.

Latest run results:

Run details: (Test run date: one month 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
for of	967185.1 Ops/sec
destructuring of values	1927880.5 Ops/sec

Related benchmarks:

Mapping of Map: for of VS destructuring of values (version: 0)

Comparing performance of: for of vs destructuring of values

Created: one month ago by: Guest

Jump to the latest result

for of

destructuring of values

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):