Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
map/filter vs reduce/spread vs reduce/mutate
(version: 0)
Benchmark.js
Comparing performance of:
map/filter vs reduce/spread vs reduce/mutate
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var values = new Array(10_000).fill(0).map((_, i) => i);
Tests:
map/filter
const result = values.map(v => v + 1).filter(v => v % 2 === 0)
reduce/spread
const result = values.reduce((acc, val) => { const r = val + 1; if (r % 2 === 0) return [...acc, r] return acc }, [])
reduce/mutate
const result = values.reduce((acc, val) => { const r = val + 1; if (r % 2 === 0) acc.push(r) return acc }, [])
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
map/filter
reduce/spread
reduce/mutate
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Browser/OS:
Chrome 119 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=486967" width="100%" height="500px"></iframe>
reduce/mutate
35K/s
map/filter
5K/s
reduce/spread
144/s
View exact numbers
Test name
Executions per second
✓
reduce/mutate
35,301 Ops/sec
map/filter
5,419 Ops/sec
reduce/spread
144 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided JSON represents a JavaScript microbenchmarking test case, where users can compare the performance of different approaches for filtering and reducing an array of numbers. **Script Preparation Code** The script preparation code is used to initialize the benchmark variables. In this case, it creates an array `values` with 10,000 elements, filled with zeros, using the `Array.prototype.fill()` method. The `map()` method is then applied to the array, mapping each element to its index in the original array. **Individual Test Cases** There are three test cases: 1. **Map/Filter**: This test case uses the `map()` and `filter()` methods to create a new array with elements that meet a certain condition (i.e., even indices). 2. **Reduce/Spread**: This test case uses the `reduce()` method with an arrow function to accumulate values in an array, and then uses the spread operator (`...`) to add more values to the accumulator. 3. **Reduce/Mutate**: This test case uses the `reduce()` method with an arrow function to mutate the accumulator directly by pushing new values onto it. **Library: Array.prototype.reduce()** The `Array.prototype.reduce()` method is used in all three test cases. It's a built-in JavaScript method that applies a function against an accumulator and each element of the array (from left to right) to reduce it to a single output value. **Other Considerations** * **Order of Operations**: In the `reduce/spread` and `reduce/mutate` tests, the order of operations is important. The spread operator (`...`) is used to add more values to the accumulator, while in the `reduce/mutate` test, new values are pushed onto the accumulator directly. * **Memory Allocation**: The `map()` method creates a new array with the filtered elements, which can lead to increased memory allocation compared to using `reduce()` or other approaches that avoid creating new arrays. **Pros and Cons of Each Approach** 1. **Map/Filter**: * Pros: Simple to understand and implement, no memory allocation concerns. * Cons: Creates a new array, potentially leading to performance issues with large datasets. 2. **Reduce/Spread**: * Pros: Can be more efficient than `map()` and `filter()`, as it avoids creating a new array. * Cons: Requires careful handling of the spread operator (`...`) to avoid unnecessary allocations. 3. **Reduce/Mutate**: * Pros: Avoids creating a new array, which can improve performance for large datasets. * Cons: Requires modifying the accumulator directly, which can lead to unexpected behavior if not handled carefully. **Alternatives** Other approaches that could be used in this benchmark include: 1. Using `forEach()` instead of `map()` 2. Implementing a custom filtering function using `Array.prototype.forEach()` and `if` statements 3. Using `Lodash` or other utility libraries to simplify the implementation However, these alternatives may not provide the same level of performance as the approaches used in the benchmark, and are likely to have different trade-offs in terms of complexity and maintainability.
Related benchmarks
flatMap vs reduce using push
Flat map + filter vs. Reduce
Comments
Confirm delete:
Do you really want to delete benchmark?