Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push with large arrays
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs spread operator vs Push
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
Array.prototype.concat
let a = new Array(500000).fill(0); let b = new Array(10000).fill(0); var other = a.concat(b);
spread operator
let a = new Array(500000).fill(0); let b = new Array(10000).fill(0); var other = [ ...a, ...b ]
Push
let a = new Array(500000).fill(0); let b = new Array(10000).fill(0); var other = a.push(...b);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
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=493802" width="100%" height="500px"></iframe>
Array.prototype.concat
455/s
Push
320/s
spread operator
265/s
View exact numbers
Test name
Executions per second
✓
Array.prototype.concat
455 Ops/sec
Push
320 Ops/sec
spread operator
265 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided benchmark. The benchmark is comparing three different ways to concatenate or append large arrays in JavaScript: 1. **`Array.prototype.concat()`**: This method creates a new array by copying elements from two existing arrays and returns the resulting array. 2. **Spread Operator (`...`)**: This operator allows you to expand an array into separate elements, which can be used as individual arguments when calling functions like `push()`. 3. **`Array.prototype.push()`**: This method appends one or more elements to the end of an existing array and returns the new length of the array. **Pros and Cons:** * **`Array.prototype.concat()`**: Pros: * Well-established and widely supported method. * Can handle large arrays efficiently due to its optimized implementation in V8 (Chrome's JavaScript engine). * Returns a new array, which can be beneficial for memory management. Cons: * Creates a new array, which can lead to increased memory usage. * Less efficient than the spread operator or push method when dealing with very large arrays. * **Spread Operator (`...`)**: Pros: * More concise and readable syntax compared to `concat()` and `push()`. * Efficiently uses built-in array operations, making it suitable for large arrays. * Returns a new array, which can be beneficial for memory management. * **`Array.prototype.push()`**: Pros: * Creates a new array is not necessary; the original array's length increases by one element. * Less efficient than `concat()` and spread operator when dealing with very large arrays. Cons: * The performance difference between push and concat or spread for large arrays can be noticeable, depending on specific use cases. * Push modifies the original array; if the array is not intended to grow dynamically, this could lead to issues. **Library and Special JS Features:** No libraries are mentioned in the benchmark definition. However, all tests assume that `Array.prototype.push()` and the spread operator (`...`) work as expected for large arrays. There's no special JavaScript feature being tested here. The focus is on comparing three common methods for appending elements to an array. **Other Alternatives:** If you prefer or need alternative methods: * **Using `Array.from()`**: This method creates a new array from an iterable object, such as another array. It can be used in conjunction with spread operator (`...`). Example: ```javascript let other = Array.from([ ...a ], x => [x]); ``` * **Using `slice()` and then `concat()`**: This method creates a shallow copy of a portion of an array using the slice() method, followed by concatenating with another array. Example: ```javascript let other = a.slice(0, 500000).concat(b); ```
Related benchmarks
Array.prototype.concat vs spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator on large array
Comments
Confirm delete:
Do you really want to delete benchmark?