Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Append - Push vs Spread
(version: 0)
Benchmark.js
Comparing performance of:
Pushing with spread operator vs Pushing with push method
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
Pushing with spread operator
// Init test case let arr = new Array(1_000); let elemsToPush = new Array(1_000); arr.fill(0); elemsToPush.fill(1); elemsToPush.forEach((e)=>{arr = [...arr,e]});
Pushing with push method
// Init test case let arr = new Array(1_000); let elemsToPush = new Array(1_000); arr.fill(0); elemsToPush.fill(1); elemsToPush.forEach((e)=>arr.push(e));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Pushing with spread operator
Pushing with push method
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15
Browser/OS:
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=506608" width="100%" height="500px"></iframe>
Pushing with push method
63K/s
Pushing with spread operator
204/s
View exact numbers
Test name
Executions per second
✓
Pushing with push method
62,632 Ops/sec
Pushing with spread operator
204 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Measuring the performance of different JavaScript approaches can be a complex task, as it depends on various factors such as browser implementation, device hardware, and JavaScript engine optimizations. In this benchmark, we're comparing two approaches for pushing elements onto an array: 1. **Push Method**: The `push()` method adds one or more elements to the end of an array. 2. **Spread Operator**: The spread operator (`...`) creates a new array by copying elements from an existing array. **Push Method** The push method is a simple and widely used approach for adding elements to an array. In modern JavaScript engines, this method is optimized to be efficient, as it updates the internal array storage directly without creating a new copy of the array. Pros: * Wide browser support: The `push()` method is implemented in most modern browsers, ensuring consistent results across different devices. * Simple and intuitive code: It's easy to understand and use the push method for adding elements to an array. Cons: * Potential performance overhead: Creating a new array copy with the spread operator can be slower than using the push method directly on the original array. **Spread Operator** The spread operator creates a new array by copying elements from an existing array. This approach can be useful when you need to manipulate arrays without modifying the original array. Pros: * Flexibility: The spread operator allows for more flexibility in manipulating arrays, as it creates a new copy that can be modified independently. * Potential performance benefits: In some cases, using the spread operator can lead to better performance due to the optimization of creating a new array copy. Cons: * Performance overhead: Creating a new array copy with the spread operator can introduce additional overhead compared to using the push method directly on the original array. **Other Considerations** * **Array.prototype.reduce()**: Another approach for adding elements to an array is using `reduce()` method. While it's not used in this benchmark, it's worth noting that it may offer better performance than both push and spread operator approaches. * **Native Array methods**: Some browsers provide native methods like `nativeSetLength()` or `nativeSlice()`, which can be used to manipulate arrays without creating a new copy. However, these methods are not widely supported across different devices. **Benchmark Results** In this benchmark, the results show that: * The push method outperforms the spread operator approach in terms of execution speed. * Safari 17 on Mac OS X 10.15.7 achieves the best performance for both approaches, followed by other browsers and devices. It's essential to note that these results may vary depending on your specific use case and browser implementation. When writing JavaScript code, it's crucial to consider the trade-offs between different approaches and optimize for performance according to your requirements. Keep in mind that MeasureThat.net is a specialized platform designed specifically for microbenchmarking JavaScript code. While it provides valuable insights into performance differences, it may not always reflect real-world scenarios or edge cases.
Related benchmarks
spread operator vs push test - correct
Pushing items via Array.push vs. Spread Operator
Comments
Confirm delete:
Do you really want to delete benchmark?