Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Spread vs Push when copying array
(version: 0)
Comparing performance of:
Spread vs Push
Created:
6 years ago
by:
Guest
Go to the latest result
Tests:
Spread
var array = [1,2,3]; var result = [...array];
Push
var array = [1,2,3]; var result = []; for (var item of array) { result.push(item); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Spread
Push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=499374" width="100%" height="500px"></iframe>
Spread
20.8M/s
Push
17.0M/s
View exact numbers
Test name
Executions per second
✓
Spread
20,805,458 Ops/sec
Push
17,000,828 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **What is being tested?** The provided benchmark tests two approaches to copy an array in JavaScript: using the spread operator (`[...array]`) and using `push()` method. The test case uses a simple array `[1, 2, 3]` as input. **Options compared** Two options are compared: 1. **Spread operator**: `var result = [...array];` 2. **Push method**: `var result = []; for (var item of array) { result.push(item); }` **Pros and Cons** 1. **Spread operator** * Pros: + Concise and expressive syntax + No loops required, making it more readable + Creates a shallow copy, which might be sufficient for many use cases * Cons: + Can create an array of arrays if the input is an array with nested objects or other complex data structures + Performance overhead due to creating a new array and copying elements (approximately 2x slower than `push` method in this benchmark) 2. **Push method** * Pros: + More control over the copy process, as each element can be added individually + No performance overhead compared to spread operator for simple arrays * Cons: + Requires an empty array as initial value (`var result = []`) + May require more complex code for larger datasets **Library and purpose** None of the test cases use any external libraries. **Special JS feature or syntax** The benchmark uses the `for...of` loop, which is a relatively modern feature introduced in ECMAScript 2015 (ES6). This loop allows iterating over iterable objects without manual indexing. In this case, it's used to populate an array with elements from another array. Other alternatives If you're curious about alternative approaches, here are some other ways to copy an array: * **`concat()` method**: `var result = array.concat([])` * **`slice()` method**: `var result = array.slice()` * **Manual indexing and looping**: `var result = []; for (var i = 0; i < array.length; i++) { result.push(array[i]); }` Keep in mind that these alternatives might have different performance characteristics or requirements depending on your specific use case. In summary, the spread operator provides a concise and expressive way to copy an array, but may come with some performance overhead. The `push` method offers more control over the copy process, but requires manual looping and can be less readable for complex datasets.
Related benchmarks
Pushing items via Array.push vs. Spread Operator
Spread vs Push when adding into array
Comments
Confirm delete:
Do you really want to delete benchmark?