Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator [3]
(version: 1)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
Array.prototype.concat vs spread operator vs double spread
Created:
one year ago
by:
Guest
Jump 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 ]
double spread
var params1 = [ "hello", true, 7 ] var params2 = [ 1, false, "12" ] var merged = [...params1, ...params2]
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
double spread
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/134.0.0.0 Safari/537.36
Browser/OS:
Chrome 134 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=597084" width="100%" height="500px"></iframe>
Test name
Executions per second
Array.prototype.concat
26059610.0 Ops/sec
spread operator
89847848.0 Ops/sec
double spread
63577864.0 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark titled "Array.prototype.concat vs spread operator [3]" evaluates the performance of two methods for merging arrays in JavaScript: the traditional `Array.prototype.concat` method and the newer ES6 spread operator (`...`). A third approach using double spread is also tested. ### Options Compared: 1. **Array.prototype.concat** - **Test Case**: `var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);` - **Description**: This method creates a new array by concatenating the provided array arguments, without modifying the original arrays. 2. **Spread Operator** - **Test Case**: `var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ];` - **Description**: The spread operator expands an iterable (like an array) into a list of arguments. This approach generates an array that includes both existing elements and those from another array, all in a single operation. 3. **Double Spread** - **Test Case**: `var params1 = [ "hello", true, 7 ]; var params2 = [ 1, false, "12" ]; var merged = [...params1, ...params2];` - **Description**: This variant uses the spread operator twice to merge two arrays into one. It effectively combines elements from both `params1` and `params2`. ### Pros and Cons of Each Approach: - **Array.prototype.concat**: - **Pros**: - Well-established and widely supported across all JavaScript environments. - Clear and explicit in terms of intention. - **Cons**: - Performance can be slower compared to the spread operator in certain environments. - Requires developers to explicitly call a method to execute the concatenation. - **Spread Operator**: - **Pros**: - Provides a more concise and readable syntax for combining arrays. - Often performs better than `concat` in modern JavaScript engines due to optimizations. - **Cons**: - Introduced in ES6, so not available in older JavaScript environments (although most modern browsers support it). - Can lead to higher memory usage for larger arrays since it creates a new array. - **Double Spread**: - **Pros**: - Very readable and suitable for merging multiple arrays at once. - Similar performance benefits as the single spread operator. - **Cons**: - Just as with the single spread, it necessitates the creation of a new array and may consume more memory. - Slightly more complex than using a simple `concat`. ### Additional Considerations: - **Performance Results**: - The benchmark results indicate that the spread operator outperforms both the `concat` method and the double spread in terms of executions per second. Specifically, the results show: - Spread operator: **89,847,848 executions/sec** - Double spread: **63,577,864 executions/sec** - Array.prototype.concat: **26,059,610 executions/sec** This suggests that for most scenarios, the spread operator is the preferred choice for performance. ### Alternatives: - Other methods for merging arrays include using libraries like Lodash with methods such as `_.merge` or `_.union` that offer additional functionality and convenience for handling complex array manipulations. However, these libraries may introduce overhead and dependencies that simple vanilla JS solutions do not have. Overall, for developers working with modern JavaScript, the spread operator generally provides a superior combination of clarity, functionality, and performance, making it the better choice for merging arrays in most circumstances.
Related benchmarks:
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator 2
Array.prototype.concat vs spread vs push operator
Array.prototype.concat vs spread operator test 656524458
Array.prototype.concat vs spread operator vs flat v2
Array.prototype.concat vs spread operator vs flat2
Array concat vs spread operator vs spread with 2
Comments
Confirm delete:
Do you really want to delete benchmark?