Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Add a lot of elements to array: slice and push vs destructuring
(version: 1)
Comparing performance of:
spread operator vs Push
Created:
one year ago
by:
Guest
Go to the latest result
Tests:
spread operator
const before = Array(100000).fill('before') const after = Array(100000).fill('after') const other = [ ...before, ...after ]
Push
const before = Array(100000).fill('before') const after = Array(100000).fill('after') const other = before.slice().push(...after)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread operator
Push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0
Browser/OS:
Firefox 144 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618906" width="100%" height="500px"></iframe>
Push
564/s
spread operator
297/s
View exact numbers
Test name
Executions per second
✓
Push
564 Ops/sec
spread operator
297 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark provided compares two different methods for adding a large number of elements to an array in JavaScript: using the spread operator versus using the `Array.prototype.push` method. Here's a breakdown of the benchmarking approach and the pros and cons of each method. ### Approach Compared 1. **Spread Operator**: - **Code**: `const other = [ ...before, ...after ]` - In this case, the `before` array, filled with 100,000 'before' strings, and the `after` array, filled with 100,000 'after' strings, are combined into a new array using the spread operator (`...`). This syntax expands the elements of the two arrays into a new array. 2. **Array.prototype.push with slice**: - **Code**: `const other = before.slice().push(...after)` - Here, the `before` array is first duplicated using `slice()`, and then the elements of the `after` array are added to the end of this duplicate using `push`. Note that `slice()` creates a shallow copy of the `before` array, while `push(...after)` appends the elements of `after` to this new array. ### Benchmark Results The benchmark results show the number of executions per second for each method: - **Spread operator**: 1386.25 executions per second - **Push**: 990.10 executions per second Clearly, the spread operator outperforms the `push` method in this test case. ### Pros and Cons #### Spread Operator **Pros**: - Concise syntax that is easy to read and understand. - Generally faster in this benchmarking context. - Creates a new array directly, which can be beneficial for immutability practices (e.g., in functional programming). **Cons**: - In older JavaScript environments (pre-ES6), the spread operator is not available without transpilation (though this is now less of an issue). #### Array.prototype.push **Pros**: - Familiar method for those who may not be as familiar with ES6 features. - Can be slightly more efficient in scenarios where modifying the existing array is acceptable without creating additional copies. **Cons**: - Slightly more verbose compared to the spread operator. - Performance is generally lower in this specific context compared to the spread operator, as shown in the benchmark results. - The use of `slice()` to create a copy adds additional overhead. ### Other Considerations When deciding between these two methods, consider the importance of readability versus performance in your specific context. The spread operator tends to be more readable for developers familiar with modern JavaScript. While performance differences could be more pronounced with different array sizes or in different environments, the results indicate that the spread operator is generally favorable for combining arrays. ### Alternatives Other alternatives to consider for merging arrays could include: - **`concat()`** method: `const other = before.concat(after);` – It merges two or more arrays and returns a new array while not modifying the original arrays. - **Manual loop or iteration**: Less common and generally not recommended for readability and performance reasons, but it can be optimized in certain cases. Ultimately, the choice of method might depend on the specific requirements of your application, such as performance constraints, code readability preferences, and the JavaScript environment in which your code will run.
Related benchmarks
new Array from vs slice vs push vs index vs spread
new Array from vs slice vs push vs index vs spread (with array prepared)
Add a lot of elements to array: push vs destructuring
Spread Operator vs Push Method
concat vs Destructuring
Comments
Confirm delete:
Do you really want to delete benchmark?