Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Reduce with spread operator vs without on a large array 2
(version: 0)
Reduce with spread operator vs without on a large array
Comparing performance of:
reduce with spread vs reduce without spread
Created:
2 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var array = new Array(10000).fill(1) function withSpread(item, index) { return { [`group${index}`]: { id: index, timestamp: new Date(new Date().getTime() + (index * 1000)), isOdd: index % 2 === 0, isEven: index % 2 !== 0 } } } function withOutSpread(acc, item, index) { acc[index] = { id: index, timestamp: new Date(new Date().getTime() + (index * 1000)), isOdd: index % 2 === 0, isEven: index % 2 !== 0 } return acc; }
Tests:
reduce with spread
Object.assign({}, ...array.map(withSpread))
reduce without spread
array.reduce(withOutSpread, {})
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
reduce with spread
reduce without spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 days ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 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 with spread
556.1 Ops/sec
reduce without spread
2041.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in this benchmark. **Benchmark Definition JSON** The website `MeasureThat.net` provides a JavaScript microbenchmarking tool, and we're testing two approaches to reduce an array of 10,000 elements: 1. `reduce with spread operator (`Object.assign({}, ...array.map(withSpread))`) 2. `reduce without spread operator (`array.reduce(withOutSpread, {})`)) **Options Compared** The two options being compared are: * Using the spread operator (`...`) to create a new object from the array map result * Not using the spread operator and instead modifying the accumulator directly (`acc[index] = ...`) **Pros and Cons of Each Approach** 1. **Reduce with Spread Operator** * Pros: + Creates a new object, which might be more predictable and efficient for some use cases. + Reduces memory allocation and garbage collection overhead. * Cons: + May lead to higher memory usage due to the creation of a new object. + Might incur additional overhead for array map and spread operator operations. 2. **Reduce without Spread Operator** * Pros: + Avoids creating a new object, reducing memory allocation and garbage collection overhead. + Can be faster since it modifies the accumulator directly. * Cons: + May lead to unpredictable behavior or side effects if not handled carefully (e.g., modifying the original array). + Might require more complex code to manage the accumulator correctly. **Library Usage** The benchmark uses the `array.prototype.reduce()` method, which is a built-in JavaScript function. The `withOutSpread` function modifies the accumulator directly using `acc[index] = ...`, while the `withSpread` function creates a new object using spread operator (`...`) to create an intermediate result. **Special JS Feature or Syntax** There are no special features or syntax being tested in this benchmark. It's a straightforward comparison of two approaches to reduce an array. **Other Alternatives** If you wanted to test alternative approaches, you could consider: * Using `for` loop instead of `reduce()` for both cases * Using other reduction functions like `forEach()`, `map()`, or `every()` * Adding additional complexity to the benchmark, such as inserting random values into the array during execution These alternatives would provide more comprehensive insights into performance and efficiency under different scenarios.
Related benchmarks:
ES6 spread operator vs. Array.prototype.reduce()
Spread vs mutating
Array spread operator vs push 2
Math.max(...) vs Array.reduce()
Array.slice() vs. Spread operator (10000 items)
Comments
Confirm delete:
Do you really want to delete benchmark?