Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
flatMap vs reduce vs reduce with push
(version: 0)
Comparing performance of:
reduce with concat vs flatMap vs reduce with push
Created:
2 years ago
by:
Guest
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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:
2 years 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=522081" width="100%" height="500px"></iframe>
reduce with push
32K/s
flatMap
5K/s
reduce with concat
28/s
View exact numbers
Test name
Executions per second
✓
reduce with push
31,903 Ops/sec
flatMap
5,113 Ops/sec
reduce with concat
28 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
Reduce Push vs. flatMap
flatMap vs reduce using push
Reduce Push vs. flatMap with subarrays
Comments
Confirm delete:
Do you really want to delete benchmark?