Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Spread vs mutating
(version: 0)
Comparing performance of:
Spread operator vs Mutate accumulator
Created:
8 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var array = Array.from(Array(1000).keys());
Tests:
Spread operator
array.reduce((acc, number) => ({ ...acc, [number]: null }), {});
Mutate accumulator
array.reduce((acc, number) => { acc[number] = null; return acc; }, {});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Spread operator
Mutate accumulator
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/136.0.0.0 Safari/537.36
Browser/OS:
Chrome 136 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=604337" width="100%" height="500px"></iframe>
Mutate accumulator
176K/s
Spread operator
9K/s
View exact numbers
Test name
Executions per second
✓
Mutate accumulator
175,899 Ops/sec
Spread operator
9,088 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON to understand what's being tested and the pros and cons of different approaches. **Benchmark Definition** The benchmark definition is a JavaScript function that measures the performance of two different approaches: 1. **Spread operator**: `array.reduce((acc, number) => ({ ...acc, [number]: null }), {})` 2. **Mutate accumulator**: `array.reduce((acc, number) => { acc[number] = null; return acc; }, {})` The spread operator is a newer JavaScript feature introduced in ECMAScript 2018 (ES9). It creates a new object by spreading the properties of an existing object. **Options compared** In this benchmark, we have two options: 1. **Spread operator**: This approach uses the spread operator to create a new object and then updates it with the provided values. 2. **Mutate accumulator**: This approach modifies the accumulator object directly by assigning null values to its properties. **Pros and Cons of each approach** **Spread Operator:** Pros: * Creates a new object, which can be beneficial for performance if the original object is not modified elsewhere in the code. * More concise and readable code. Cons: * May incur overhead due to the creation of a new object. * Can lead to memory allocation issues if not managed properly. **Mutate Accumulator:** Pros: * Modifies the existing accumulator object, reducing memory allocation and deallocation overhead. * Avoids creating a new object, which can be beneficial for performance in some cases. Cons: * May require more code to modify the accumulator object explicitly. * Can lead to confusion if not properly managed. **Other considerations** In this benchmark, we can also consider other factors that may affect performance, such as: * Array size: The benchmark uses an array of 1000 elements. Larger arrays may exhibit different behavior due to cache and memory allocation effects. * Browser and device platform: The test results are specific to Chrome 73 on a Linux desktop. Other browsers or devices may behave differently. **Library usage** In the provided code, we don't see any explicit library usage beyond the built-in `Array` and `reduce()` functions. However, it's essential to note that some libraries might optimize or modify these functions, affecting benchmark results. **Special JS feature or syntax** The spread operator is a special JavaScript feature introduced in ES9 (2018). It allows creating new objects by spreading existing objects' properties. If your codebase uses an older version of JavaScript without this feature, you may need to use alternative approaches. **Alternatives** For similar benchmarks, consider exploring other testing frameworks or tools that allow you to compare performance of different algorithms and approaches. Some popular alternatives include: * Node.js `perf_hooks` module for high-performance benchmarking. * Browser-specific performance benchmarking tools, such as Chrome DevTools' Performance Tab. * Open-source benchmarking libraries like `benchmark` or `fast-est`. Keep in mind that the choice of alternative depends on your specific use case, JavaScript version support, and testing requirements.
Related benchmarks
Javascript string to array mapping: Array.from() vs Spread syntax [...spread]
Comments
Confirm delete:
Do you really want to delete benchmark?