Benchmark: flatMap vs reduce vs reduce with push

Script Preparation code:

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

Tests:

reduce with concat
arr.reduce((acc, x) => [...acc, x], [])
flatMap
arr.flatMap(x => [x])
reduce with push
arr.reduce((acc, x) => { acc.push(x); return acc; }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with concat
flatMap
reduce with push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with concat	28.0 Ops/sec
flatMap	5113.4 Ops/sec
reduce with push	31902.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided JavaScript microbenchmark.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different ways to flatten an array in JavaScript: using `reduce()` with concatenation, using `flatMap()`, and using `reduce()` with a push operation. The goal is to determine which approach is the most efficient.

**Options Compared**

1. **`arr.reduce((acc, x) => [...acc, x], [])`**: This approach uses the spread operator (`...`) to concatenate each element of the array to the accumulator array. It's equivalent to using `concat()` method.
2. **`arr.flatMap(x => [x])`**: This approach uses the `flatMap()` method, which is a part of the ECMAScript 2019 standard and provides a concise way to flatten arrays.
3. **`arr.reduce((acc, x) => {\r\n\tacc.push(x);\r\n  \treturn acc;\r\n}, [])`**: This approach uses a push operation inside the `reduce()` callback function.

**Pros and Cons of Each Approach**

1. **`arr.reduce((acc, x) => [...acc, x], [])`**:
	* Pros: Wide browser support, easy to understand.
	* Cons: Can be slower due to the overhead of concatenation.
2. **`arr.flatMap(x => [x])`**:
	* Pros: Concise and efficient, optimized for modern browsers.
	* Cons: Requires ECMAScript 2019 or later for support, may not work in older browsers.
3. **`arr.reduce((acc, x) => {\r\n\tacc.push(x);\r\n  \treturn acc;\r\n}, [])`**:
	* Pros: Can be faster than the spread operator approach due to the push operation.
	* Cons: Less intuitive and may require more code.

**Library or Special JS Feature**

In this benchmark, no specific library is used. However, `flatMap()` is a built-in method that was introduced in ECMAScript 2019. It's not a separate library but rather a new syntax added to the language.

**Other Considerations**

The test cases use arrays of length 10,000 to simulate real-world scenarios where performance is critical.

**Alternative Approaches**

If you want to explore other approaches, here are some alternatives:

1. **Using `Array.prototype.reduce()` with a custom callback**: You can define your own callback function that handles the flattening logic.
2. **Using a library like Lodash**: Lodash provides a `flattenDeep()` function that can be used for flattening arrays in a more concise way.

Keep in mind that the choice of approach depends on the specific use case, performance requirements, and personal preference.

Related benchmarks:

flatMap vs reduce vs reduce with push (version: 0)

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

Created: 7 months ago by: Guest

Jump to the latest result

reduce with concat

flatMap

reduce with push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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