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

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); }
push(...arr)
const acc = [] acc.push(...arr);
for i with sparse array
const n = arr.length; const acc = new Array(n) for (let i = 0; i<n; i++) { acc[i] = arr[i]; }

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
push(...arr)
for i with sparse array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with spread	33.1 Ops/sec
flatMap	5768.1 Ops/sec
reduce with push	37687.5 Ops/sec
for...of	46797.6 Ops/sec
push(...arr)	63967.9 Ops/sec
for i with sparse array	3228.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The test case compares six different approaches to flatten an array of 10,000 elements:

1. `flatMap`
2. `reduce` with spread operator (`[...acc, x]`)
3. `reduce` with `push` method (`acc.push(x)`)
4. `for...of` loop
5. Using sparse arrays with a fixed length (`const n = arr.length; const acc = new Array(n)`)

**Options Compared**

Here's a brief overview of each option:

1. **flatMap**: This method returns an array from an iterable or an array-like object. It's equivalent to calling `Array.prototype.map()` on the iterable.
2. **Reduce with spread operator**: This approach uses the spread operator (`[...acc, x]`) to concatenate the accumulator and the current element.
3. **Reduce with push**: This method iterates over the array, pushing each element onto the accumulator using the `push` method.
4. **For...of loop**: This approach uses a traditional for loop to iterate over the array, pushing each element onto the accumulator.
5. **Sparse arrays with fixed length**: This option creates a sparse array of the same length as the original array and then iterates over it, assigning each element from the original array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **flatMap**:
	* Pros: concise, efficient, and widely supported.
	* Cons: might be less readable for complex iterables or objects.
2. **Reduce with spread operator**:
	* Pros: concise, flexible, and works well with arrays and iterables.
	* Cons: requires understanding of the spread operator syntax.
3. **Reduce with push**:
	* Pros: straightforward, easy to understand, and suitable for simple cases.
	* Cons: less efficient than other approaches due to the overhead of `push`.
4. **For...of loop**:
	* Pros: readable, easy to understand, and works well for small arrays or simple iterables.
	* Cons: less concise and might be slower than other approaches due to the overhead of the loop.
5. **Sparse arrays with fixed length**:
	* Pros: efficient for large arrays, reduces memory allocation.
	* Cons: more complex to set up and understand.

**Other Considerations**

When choosing an approach, consider factors like:

* Readability: how well does the code convey its intent?
* Performance: which approach is faster for large datasets or computationally intensive operations?
* Support: which approaches are widely supported by modern browsers and Node.js versions?

The provided benchmark results show that:

* `push(...arr)` outperforms all other approaches, likely due to its optimized implementation in modern browsers.
* The `for...of` loop is relatively fast, but still slower than the array-based approaches.
* The `reduce` methods with spread operator and push are comparable in performance.

**Alternatives**

If you're looking for alternative approaches or want to explore other options, consider:

* Using libraries like Lodash or Ramda, which provide additional utility functions for array manipulation.
* Implementing custom optimized algorithms for specific use cases or datasets.
* Exploring other methods like `concat()` or `slice()`, although these might not be as efficient or concise.

I hope this explanation helps you understand the provided benchmark and its results!

Related benchmarks:

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

Comparing performance of: reduce with spread vs flatMap vs reduce with push vs for...of vs push(...arr) vs for i with sparse array

Created: one year ago by: Guest

Jump to the latest result

reduce with spread

flatMap

reduce with push

for...of

push(...arr)

for i with sparse array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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