Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Reduce vs Filter/Map vs Map/Filter
(version: 0)
Comparing performance of:
Reduce vs Filter/Map vs Map/Filter
Created:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var a = []; for (let i = 0; i < 1000; i++) { a.push(Number(i) / 1000); } var filtering = x => (x * 114514) % 1 > 0.5; var mapping = x => x + 0.1919; var reducing = (acc, x) => { const value = mapping(x); if (filtering(value)) { acc.push(value); } return acc; }
Tests:
Reduce
a.reduce(reducing, []);
Filter/Map
a.filter(filtering).map(mapping);
Map/Filter
a.map(mapping).filter(filtering);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Reduce
Filter/Map
Map/Filter
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
22 days ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3.1 Safari/605.1.15
Browser/OS:
Safari 26 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Reduce
44546.5 Ops/sec
Filter/Map
47739.3 Ops/sec
Map/Filter
44368.6 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark, "Reduce vs Filter/Map vs Map/Filter", tests the performance of three different approaches to filter and transform an array in JavaScript: `reduce`, `filter` + `map`, and `map` + `filter`. The benchmark creates a large array of 1000 elements, each with a value representing a timestamp (number divided by 1000), and applies the specified filtering and transformation functions. **Options Compared** The three options compared are: 1. **Reduce**: Uses the `reduce` method to apply the filtering function cumulatively to the array, accumulating the results in an accumulator. 2. **Filter/Map**: Uses the `filter` method to filter out elements that don't meet the condition, followed by the `map` method to transform the remaining elements. 3. **Map/Filter**: Uses the `map` method to transform all elements in the array first, then uses the `filter` method to remove elements that don't meet the condition. **Pros and Cons of Each Approach** 1. **Reduce**: * Pros: Can be more efficient since it only iterates over the array once. * Cons: May not be as readable or maintainable due to the accumulation of intermediate results in the accumulator. 2. **Filter/Map**: * Pros: More readable and easier to understand, especially for developers familiar with functional programming concepts. * Cons: Requires two separate passes over the array, which can lead to more memory usage. 3. **Map/Filter**: * Pros: Can be more efficient than `filter` + `map`, as it transforms all elements before filtering them out. * Cons: Still requires two passes over the array, and may not be as readable as `filter` + `map`. **Library Use** There is no explicit library used in this benchmark. However, some browsers might use their own internal optimization or polyfills for certain methods. **Special JS Feature/Syntax** None mentioned in the provided code snippet. **Other Alternatives** If you're interested in exploring other approaches, consider: * **forEach**: Instead of using `reduce`, `filter`, and `map`, you could use the `forEach` method to iterate over the array. However, this might not be as efficient or readable. * **Lodash's `filterBy` and `transformEach` functions**: If you're familiar with Lodash, these functions can provide a concise way to filter and transform arrays using functional programming techniques. Keep in mind that these alternatives might not be directly comparable to the original benchmark, as they might have different performance characteristics or syntax nuances.
Related benchmarks:
filter-map vs reduce
filter-map vs reduce vs reduce with destructuring
filter-map vs reduce fixed
filter-map vs reduce 2
filter-map vs reduce 100k
Comments
Confirm delete:
Do you really want to delete benchmark?