Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
slice vs spread operator
Created:
8 years ago
by:
Guest
Go to the latest result
Tests:
slice
var other = [ "hello", true, 7 ].concat([ 1, 2, 3]);
spread operator
var other = [ ...[ "hello", true, 7 ], ...[ 1, 2, 3] ]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
slice
spread operator
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/130.0.0.0 Safari/537.36
Browser/OS:
Chrome 130 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=566922" width="100%" height="500px"></iframe>
spread operator
44.2M/s
slice
17.0M/s
View exact numbers
Test name
Executions per second
✓
spread operator
44,220,176 Ops/sec
slice
17,007,744 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The test is comparing two approaches to concatenate arrays in JavaScript: 1. The traditional `concat()` method. 2. The new ES6 spread operator (`...`). **Options Compared** In this benchmark, we have two options: 1. **Concatenation using the traditional `concat()` method**: This approach uses the built-in `concat()` function to merge two arrays. 2. **Concatenation using the spread operator**: This approach uses the new ES6 spread operator (`...`) to merge two arrays. **Pros and Cons of Each Approach** **Traditional `concat()` Method:** Pros: * Widely supported across browsers and JavaScript engines. * Well-established and understood by developers. Cons: * Can be slower than the spread operator due to the overhead of function calls. * May incur additional memory allocations. **Spread Operator (`...`):** Pros: * Faster execution compared to `concat()`. * Reduces memory allocations since it uses a new array to store the merged elements. Cons: * Requires modern JavaScript engines and browsers that support the ES6 spread operator. * Syntax may be unfamiliar to some developers. **Library and Special JS Feature** In this benchmark, we don't see any libraries being used. However, the use of the spread operator is a special JavaScript feature introduced in ECMAScript 2015 (ES6). **Other Considerations** When choosing between these two approaches, consider the following: * Performance: If you need to concatenate large arrays frequently, the spread operator might be a better choice due to its potential speed advantages. * Browser Support: Ensure that your target browsers support the ES6 spread operator. Older browsers or those without native support may require polyfills or workarounds. **Alternative Approaches** Other alternatives for concatenating arrays in JavaScript include: 1. `Array.prototype.push()`: This approach uses the `push()` method to add elements to an array, but it's less efficient than the spread operator. 2. `Array.prototype.splice()`: This approach uses the `splice()` method to remove and replace elements in an array, which can be slower and more memory-intensive than the spread operator. Overall, the choice between the traditional `concat()` method and the spread operator depends on your specific use case, performance requirements, and target browser support.
Related benchmarks
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator real
Array.prototype.concat vs spread operator on large array
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?