Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
[].concat vs [...]
(version: 0)
Benchmark.js
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
[].concat vs [...]
Created:
7 years ago
by:
Guest
Go to the latest result
Tests:
[].concat
const a = [1,2,3] const b = [4,5,6] const c = [7,8,9] const d = [].concat(a,b,c)
[...]
const a = [1,2,3] const b = [4,5,6] const c = [7,8,9] const d = [...a,...b,...c]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
[].concat
[...]
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/127.0.0.0 Safari/537.36 SberBrowser/19.0.0.0
Browser/OS:
Chrome 127 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=560827" width="100%" height="500px"></iframe>
[...]
9.1M/s
[].concat
2.7M/s
View exact numbers
Test name
Executions per second
✓
[...]
9,098,901 Ops/sec
[].concat
2,719,216 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The provided JSON represents two JavaScript microbenchmarks on the MeasureThat.net website. The benchmarks aim to compare the performance of the traditional `concat()` method with the new ES6 spread operator (`[...]`) for array concatenation. **What is being tested:** Two options are compared: 1. **Traditional `concat()` method**: This involves creating an empty array and then using the `concat()` method to add elements to it. 2. **ES6 spread operator (`[...]`)**: This involves creating an empty array and then using the spread operator to add elements to it. **Options comparison:** The traditional `concat()` method creates a new array by combining two or more arrays, which can lead to performance issues due to: * Creating a new array object, which requires memory allocation. * Iterating over the source arrays to copy their elements to the new array. On the other hand, the ES6 spread operator (`[...]`) creates a new array by copying elements from one or more arrays. However, it can lead to performance issues if: * The source arrays are large and complex, causing unnecessary memory allocation and garbage collection. * The code is not properly optimized for the spread operator, leading to unnecessary function calls and object cloning. **Pros and Cons:** Traditional `concat()` method: Pros: * Simple and well-established syntax. * Easy to understand and implement. Cons: * Creates a new array object, which can lead to performance issues. * Can be slower than the spread operator for large arrays. ES6 spread operator (`[...]`): Pros: * More concise and expressive syntax. * Can be faster than `concat()` for small arrays or arrays with few elements. Cons: * Creates a new array object, which can lead to performance issues if not optimized properly. * Requires understanding of the spread operator syntax and behavior. **Library usage:** There is no explicit library mentioned in the provided JSON. However, it's worth noting that some JavaScript engines and browsers may have additional optimizations or features that affect the performance of these two options. For example, some browsers may use a more efficient implementation of `concat()` or optimize the spread operator for certain use cases. **Special JS feature or syntax:** There are no special JavaScript features or syntax mentioned in the provided JSON. The focus is on comparing the traditional `concat()` method with the new ES6 spread operator (`[...]`). **Other alternatives:** If you're interested in exploring other alternatives, here are a few options: * **Array.prototype.push()**: This method appends one or more elements to an array and returns the updated length. It's generally faster than `concat()` because it modifies the original array instead of creating a new one. * **array.from()**: This method creates a new array from an iterable source, such as an array, object, or string. While not specifically designed for concatenation, it can be used to create a new array by copying elements from multiple sources. * **Array.prototype.set()**: This method sets the value of each element in an array to a specified value. It's generally faster than `concat()` because it modifies the original array instead of creating a new one. These alternatives may offer better performance or convenience depending on your specific use case and requirements.
Related benchmarks
Array.prototype.concat vs spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator 12
Comments
Confirm delete:
Do you really want to delete benchmark?