Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator real
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
Array.prototype.concat vs spread operator
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
Array.prototype.concat
const params = 7; const other = [ 1, 2 ].concat([params]);
spread operator
const params = [ 1, 2] const other = [...params, 7]
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:
6 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Browser/OS:
Chrome 138 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624667" width="100%" height="500px"></iframe>
spread operator
42.2M/s
Array.prototype.concat
12.3M/s
View exact numbers
Test name
Executions per second
✓
spread operator
42,214,496 Ops/sec
Array.prototype.concat
12,310,791 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** MeasureThat.net is testing the performance of two approaches for concatenating arrays in JavaScript: the traditional `Array.prototype.concat()` method and the new ES6 spread operator (`...`). **Options compared** The benchmark compares the performance of two options: 1. **Traditional `Array.prototype.concat()`**: This method creates a new array by copying elements from the original arrays. 2. **New ES6 spread operator (`...`)**: This method uses the spread operator to create a new array by copying elements from the original arrays. **Pros and cons of each approach** * **Traditional `Array.prototype.concat()`**: + Pros: widely supported, well-understood behavior, often used in production code. + Cons: can be slower than the spread operator, especially for large arrays. * **New ES6 spread operator (`...`)**: + Pros: more efficient, creates a new array with less overhead, and is generally faster. + Cons: relatively new feature, not all browsers support it yet (although most do), and may require additional setup or libraries. **Library and its purpose** In the provided benchmark definition, there is no explicit library mentioned. However, some test cases might use external libraries that are not shown in this code snippet. If a library is used, its purpose would be to make the test more robust, reliable, or relevant. **Special JS features or syntax** There are no special JavaScript features or syntax mentioned in the provided benchmark definition. **Alternative approaches** Other alternatives for concatenating arrays include: 1. **`Array.prototype.push()`**: This method appends elements to an array and returns the updated length of the array. 2. **`Array.concat()` with a new array**: Creating a new array using `Array.from()` or another method, followed by the `concat()` method. These alternatives might be faster or more efficient in certain scenarios, but they may not offer the same performance benefits as the spread operator in modern JavaScript engines. **Benchmark preparation code** The benchmark definition does not provide any script preparation code. This suggests that the test cases are already simplified and designed to focus on the performance comparison between the two approaches. Keep in mind that benchmarking can be complex, and the results might depend on various factors such as the specific use case, browser version, platform, and hardware configuration.
Related benchmarks
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?