Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
flatMap vs reduce vs filter.map
(version: 0)
Comparing performance of:
flatMap() vs reduce() vs filter().map()
Created:
3 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var arr = Array.from({length: 20}, () => Math.floor(Math.random() * 100));;
Tests:
flatMap()
arr.flatMap((e) => e > 50 ? e / 2 : []);
reduce()
arr.reduce((acc, curr) => curr > 50 ? [...acc, curr / 2] : acc, []);
filter().map()
arr.filter((e) => e > 50).map((e) => e / 2);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
flatMap()
reduce()
filter().map()
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/135.0.0.0 Safari/537.36
Browser/OS:
Chrome 135 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=598411" width="100%" height="500px"></iframe>
filter().map()
11.5M/s
reduce()
3.0M/s
flatMap()
2.8M/s
View exact numbers
Test name
Executions per second
✓
filter().map()
11,467,173 Ops/sec
reduce()
2,975,090 Ops/sec
flatMap()
2,825,460 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, the different approaches compared, their pros and cons, and other considerations. **Benchmark Overview** The benchmark compares three different ways to process an array of numbers: 1. `flatMap()`: Returns a new array with the results of applying the provided function to each element. 2. `reduce()`: Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single output value. 3. `filter().map()` : Filters out elements from the array that don't meet the condition, then maps over the remaining elements. **Library and Special JS Features** There is no external library used in this benchmark. However, the test cases utilize some special JavaScript features: * The `flatMap` method is a newer feature introduced in ECMAScript 2019. * The `reduce` method has been part of JavaScript since its inception. * The `filter()` and `map()` methods are also built-in, but their usage with the arrow function syntax (`(e) =>`) is more modern. **Approach Comparison** The three approaches have different characteristics: 1. **flatMap()**: This approach returns a new array by applying the provided function to each element. It's often faster and more efficient than the other two methods because it avoids creating intermediate arrays. 2. **reduce()**: This approach applies a function against an accumulator and each element in the array, reducing it to a single output value. It can be slower than `flatMap()` due to its more complex processing steps, but it's often used when working with aggregations or transformations that require multiple passes over the data. 3. **filter().map()**: This approach filters out elements from the original array using `filter()`, then maps over the remaining elements using `map()`. It can be slower than `flatMap()` because of the two separate operations, and it creates intermediate arrays. **Pros and Cons** * `flatMap()`: Pros - often faster and more efficient. Cons - only supported in ECMAScript 2019 and later. * `reduce()`: Pros - suitable for aggregations or transformations that require multiple passes over data. Cons - can be slower due to its complexity, not supported by all browsers. * `filter().map()` : Pros - generally easy to understand, but may be slower than `flatMap()` due to the two separate operations. **Considerations** When choosing an approach, consider the specific use case and performance requirements: * Use `flatMap()` when you need to process a large array quickly and don't require aggregations or transformations. * Use `reduce()` when working with data that requires multiple passes over, such as calculating sums or averages. * Use `filter().map()` when simplicity is more important than raw performance, but be aware of potential slower execution times. **Alternatives** Other alternatives to these approaches could include: * Using a loop instead of the built-in array methods * Utilizing other libraries or frameworks that provide optimized implementations (e.g., Lodash) * Experimenting with different array manipulation techniques, such as using `Array.prototype.forEach()` or `Promise.all()` Keep in mind that the best approach depends on your specific requirements and performance constraints.
Related benchmarks
flatMap vs reduce vs filter.map v2
flatMap vs reduce filtering performance
flatMap vs reduce vs loop filtering vs filter/map performance
Flat map + filter vs. Reduce
Comments
Confirm delete:
Do you really want to delete benchmark?