Benchmark: flatMap vs reduce with spread vs reduce with push vs for of

Script Preparation code:

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

Tests:

reduce with spread
arr.reduce((acc, x) => [...acc, x], [])
flatMap
arr.flatMap(x => [x])
reduce with push
arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
for...of
const acc = [] for (const x of arr) { acc.push(x); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with spread
flatMap
reduce with push
for...of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
reduce with spread	20.3 Ops/sec
flatMap	3302.4 Ops/sec
reduce with push	23337.0 Ops/sec
for...of	29719.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares four different approaches for flattening an array:

1. `flatMap`: Returns a new array with all subarrays concatenated into it.
2. `reduce` with spread (`[...acc, x]`): Spreads the accumulator array onto itself, effectively concatenating.
3. `reduce` with push: Uses the `push` method to add elements to the accumulator array.
4. `for...of`: Loops through the array using a traditional `for` loop.

**Options Compared**

The benchmark compares these four approaches for flattening an array of size 10,000. The options are compared in terms of execution time, with the fastest approach winning.

**Pros and Cons of Each Approach**

1. **flatMap**: Pros:
	* Efficient, as it avoids creating a new array.
	* Suitable for large arrays.
Cons:
	* May not be suitable for very small arrays, as the overhead of creating a new array can outweigh the benefits.
2. **Reduce with Spread** (`[...acc, x]`): Pros:
	* Easy to implement and understand.
	* Works well for most cases.
Cons:
	* Creates a new array, which may not be necessary in some cases.
3. **Reduce with Push**: Pros:
	* Simple implementation.
	* Can be efficient if the accumulator array is small.
Cons:
	* May create many intermediate arrays, wasting memory.
4. **for...of**: Pros:
	* Easy to understand and implement.
	* Suitable for small to medium-sized arrays.
Cons:
	* Less efficient than the other approaches, as it uses a traditional `for` loop.

**Library and Special JS Features**

None of the options use a library or special JavaScript features beyond the standard array methods (`flatMap`, `reduce`, `push`). However, the benchmark assumes that the `Array.prototype.fill()` method is supported (used in the "Script Preparation Code").

**Benchmark Results**

The latest benchmark results show that:

* `for...of` is the fastest approach, followed by `reduce with push`.
* `reduce` with spread and `flatMap` are slower, but still acceptable.

These results suggest that for large arrays, using a traditional loop or `reduce` with `push` may be more efficient than other approaches. However, for small to medium-sized arrays, the difference in performance is often negligible.

**Alternatives**

Other alternatives for flattening an array include:

* Using `Array.prototype.concat()` or `concat()`: Similar to `flatMap`, but creates a new array.
* Using `Array.prototype.map()` and then concatenating: Similar to `reduce` with spread, but uses two operations instead of one.
* Using a custom implementation using iterators or generators: More complex and less common.

Keep in mind that the best approach depends on the specific use case and performance requirements.

Related benchmarks:

flatMap vs reduce with spread vs reduce with push vs for of (version: 0)

Comparing performance of: reduce with spread vs flatMap vs reduce with push vs for...of

Created: 2 years ago by: Guest

Jump to the latest result

reduce with spread

flatMap

reduce with push

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