Benchmark: flatMap vs reduce with spread vs reduce with concat

Script Preparation code:

var arr = Array(10_000).fill(0)

Tests:

reduce with spread
arr.reduce((acc, x) => [...acc, x, x], [])
flatMap
arr.flatMap(x => [x, x])
reduce with concat
arr.reduce((acc, x) => acc.concat(x, x), [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
flatMap
reduce with concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with spread	20.5 Ops/sec
flatMap	4848.9 Ops/sec
reduce with concat	6.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares the performance of three different methods for transforming an array in JavaScript. The methods analyzed are:

1. **reduce with spread**: 
   - Benchmark Definition: `arr.reduce((acc, x) => [...acc, x, x], [])`
   - This approach uses the `reduce` function to build a new array by spreading the accumulated array and adding the current element twice. This method creates a new array on each iteration using the spread operator `[...]`, which can lead to performance overhead due to frequent copying of potentially large arrays.

2. **flatMap**:
   - Benchmark Definition: `arr.flatMap(x => [x, x])`
   - The `flatMap` method combines mapping and flattening into one operation. It applies the provided mapping function to each element (in this case, duplicating each element) and then flattens the result into a new array. This is typically more efficient than `reduce` followed by spreading or concatenation as it reduces the number of intermediate arrays created.

3. **reduce with concat**:
   - Benchmark Definition: `arr.reduce((acc, x) => acc.concat(x, x), [])`
   - This method also uses the `reduce` function but utilizes the `concat` method to combine the current element twice to the accumulated array. Similar to the spread approach, `concat` creates new arrays during each iteration, which can also lead to significant performance penalties compared to the other methods.

### Performance Results
According to the latest benchmark results:

- **flatMap** achieved approximately **4848.95 executions per second**.
- **reduce with spread** resulted in **20.49 executions per second**.
- **reduce with concat** led to **6.63 executions per second**.

### Pros and Cons

#### 1. **reduce with spread**:
   - **Pros**: 
     - More expressive and can be easier to read for developers who are already familiar with the spread operator.
   - **Cons**: 
     - Performance hit due to creating new arrays on every iteration which can be inefficient for large datasets.

#### 2. **flatMap**:
   - **Pros**:
     - Generally the fastest among the three methods due to its optimized internal handling of mapping and flattening.
     - Cleaner and clearer syntax.
   - **Cons**:
     - Not available in very old JavaScript environments (though it is widely supported in modern environments).

#### 3. **reduce with concat**:
   - **Pros**:
     - Familiar for developers who use `reduce` regularly.
   - **Cons**:
     - Similar to reduce with spread, it incurs performance penalties for continuously creating new arrays during concatenation.

### Other Alternatives
In addition to the methods tested, other approaches for achieving similar transformations include:

- **For Loop**: 
  Using a simple `for` loop can be very efficient as it directly manipulates the array without creating intermediate data structures. 
  ```javascript
  const result = [];
  for (let i = 0; i < arr.length; i++) {
      result.push(arr[i], arr[i]);
  }
  ```

- **map followed by flattening**: 
  You could map the array to duplicate values and then flatten, although this is somewhat similar to `flatMap`.
  ```javascript
  const result = [].concat(...arr.map(x => [x, x]));
  ```

- **Array.from**: 
  An alternative to create a new array with mapped values:
  ```javascript
  const result = Array.from(arr, x => [x, x]).flat();
  ```

### Conclusion
In this benchmark, `flatMap` shows significant performance benefits compared to traditional array transformation methods using `reduce`. Understanding the performance implications of each approach can help developers choose the right tool for the job, especially when working with large data sets in JavaScript.

Related benchmarks:

flatMap vs reduce with spread vs reduce with concat (version: 1)

Comparing performance of: reduce with spread vs flatMap vs reduce with concat

Created: 2 days ago by: Guest

Jump to the latest result

reduce with spread

flatMap

reduce with concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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