Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
arrays: concat vs spread
(version: 1)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
Array.prototype.concat vs spread operator
Created:
one year ago
by:
Guest
Go to the latest result
Tests:
Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36 OPR/97.0.0.0
Browser/OS:
Opera Mobile 97 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=628110" width="100%" height="500px"></iframe>
spread operator
43.1M/s
Array.prototype.concat
9.8M/s
View exact numbers
Test name
Executions per second
✓
spread operator
43,125,516 Ops/sec
Array.prototype.concat
9,765,142 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark defined in the provided JSON compares two methods of combining arrays in JavaScript: the traditional `Array.prototype.concat()` method and the newer ES6 spread operator (`...`). ### Options Compared: 1. **Array.prototype.concat()** - **Description**: The `concat()` method is a built-in function that combines two or more arrays and returns a new array. It does not modify the existing arrays. - **Test Code**: ```javascript var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params); ``` - **Pros**: - Well-established method that is available across all JavaScript environments. - Allows for concatenating multiple arrays as arguments. - **Cons**: - Generally slower in performance compared to the spread operator in modern engines, as indicated by the benchmark results. - The syntax can be somewhat verbose and less intuitive for simple concatenations. 2. **Spread Operator** - **Description**: The spread operator (`...`) allows an iterable (like an array) to be expanded in places where zero or more arguments are expected. This provides a concise way to combine arrays. - **Test Code**: ```javascript var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ]; ``` - **Pros**: - Generally faster than `concat()`, as seen in the benchmark results (approximately 2.5 times more executions per second). - Offers a more straightforward and readable syntax for combining arrays. - **Cons**: - Introduced in ES6 (ECMAScript 2015), which may not be supported in some very old JavaScript environments, although it's widely supported in modern browsers. ### Other Considerations: - **Performance**: The results of the benchmark indicate that the spread operator significantly outperformed the `concat` method, with execution rates of about 17.66 million operations per second for the spread operator versus approximately 7.13 million for `concat`. This is an important factor to consider when selecting between these two approaches for performance-sensitive applications. - **Readability**: In addition to performance, the spread operator provides better readability, making the code more intuitive for others who may read or maintain it. ### Alternatives: - Other methods for combining arrays include using loops or `Array.prototype.push()`, but these approaches can be more complex and less efficient than `concat()` or the spread operator. - **Using `Array.prototype.push.apply()`:** This method can be used to push elements from one array into another, but it also includes potential performance drawbacks and increased complexity: ```javascript var other = [1, 2]; Array.prototype.push.apply(other, params); ``` - **Using `Array.from()` or similar utilities**: These can be used in combination to merge arrays, though they aren't as straightforward as `concat()` or the spread operator. In summary, the benchmark clearly indicates that the ES6 spread operator is the more efficient and readable option for combining arrays compared to the traditional `concat()` method, particularly in modern JavaScript development.
Comments
Confirm delete:
Do you really want to delete benchmark?