Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
spread vs push vs unshift
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
spread vs push vs unshift
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
spread
var params = [ "hello", true, 7 ]; params = [ ...params, "444"];
push
var params = [ "hello", true, 7 ] params.push("444");
unshift
var params = [ "hello", true, 7 ] params.unshift("444");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
spread
push
unshift
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/133.0.0.0 Safari/537.36
Browser/OS:
Chrome 133 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
spread
48102764.0 Ops/sec
push
73840808.0 Ops/sec
unshift
22981824.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what's being tested. **Overview** The test compares three different ways to add an element to an array in JavaScript: the traditional `push` method, the new ES6 spread operator (`...`), and the `unshift` method. The benchmark is designed to measure which approach performs better in terms of execution speed. **Options Compared** 1. **Push**: This is the traditional way of adding an element to an array. It modifies the original array by appending a new element to its end. 2. **Spread Operator (`...`)**: Introduced in ES6, this operator creates a new array from the elements of an existing array and adds the specified element(s) to it. 3. **Unshift**: This method inserts one or more elements at the beginning of an array. **Pros and Cons** * **Push**: + Pros: Simple, widely supported, and efficient for large arrays. + Cons: Modifies the original array, which can be undesirable in some cases. * **Spread Operator (`...`)**: + Pros: Creates a new array, which can help preserve the original array's state. Also, it allows for more flexibility when adding elements to an array. + Cons: May incur additional memory allocation and copying overhead due to creating a new array. * **Unshift**: + Pros: Inserts elements at the beginning of an array, which can be useful in certain scenarios (e.g., inserting items at the top of a stack). + Cons: Less efficient than `push` for large arrays, as it requires shifting all existing elements to make room for the new ones. **Libraries and Special Features** None mentioned in this benchmark. **Other Considerations** * The test only measures execution speed, so other factors like memory allocation or array copying overhead are not considered. * The test uses a desktop browser (Chrome 105) on Windows, which may impact results due to differences in hardware, operating system, and browser version. **Alternatives** If you want to explore alternative approaches or libraries for adding elements to an array, consider the following options: * **Array.prototype.splice()**: This method replaces elements at a specified index with new values. It can be more efficient than `push` for smaller arrays. * **Array.prototype.reduce()**: This method applies a reduction function to all elements of an array, accumulating a result. While not directly related to adding elements, it can be used to create a new array while preserving the original's state. * **Libraries like Lodash or Ramda**: These popular JavaScript libraries offer functions for working with arrays, such as `lodash.push()` or `ramda.unshift()`, which might provide additional features or optimizations not available in native JavaScript methods.
Related benchmarks:
spread operator vs push test - correct
spread operator vs push Brian
spread operator vs push Brian2
spread operator vs push
Array push vs spread when reducing over results
Comments
Confirm delete:
Do you really want to delete benchmark?