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: 2 years 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

for...of

30K/s

reduce with push

23K/s

flatMap

3K/s

reduce with spread

20/s

View exact numbers

Test name	Executions per second
✓ for...of	29,719 Ops/sec
reduce with push	23,337 Ops/sec
flatMap	3,302 Ops/sec
reduce with spread	20 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.

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

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

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

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

Related benchmarks

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