Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
concat() vs spread (...) for combining two arrays
(version: 1)
Comparing performance of:
concat() vs spread
Created:
one year ago
by:
Guest
Go to the latest result
Tests:
concat()
const a = [1, 2, 3, 4]; const b = [5, 6, 7, 8]; const result = a.concat(b);
spread
const a = [1, 2, 3, 4]; const b = [5, 6, 7, 8]; const result = [...a, ...b];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
concat()
spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0
Browser/OS:
Chrome 148 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=629339" width="100%" height="500px"></iframe>
concat()
8.9M/s
spread
5.4M/s
View exact numbers
Test name
Executions per second
✓
concat()
8,902,431 Ops/sec
spread
5,430,722 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark defined in the provided JSON aims to compare the performance of two different methods for combining two arrays in JavaScript: the `concat()` method and the spread operator (`...`). ### Benchmark Details 1. **Options Compared**: - **concat()**: - This method is called on an array and takes one or more arrays as arguments, combining them into a new array. - Example: `const result = a.concat(b);` combines arrays `a` and `b`. - **Spread Operator**: - This newer syntax allows for the expansion of iterable elements (like arrays) into a new array. The syntax `[...a, ...b]` incorporates all the elements from both arrays into a new array. - Example: `const result = [...a, ...b];` spreads the elements of array `a` followed by those of array `b` into a new array. ### Performance Results The latest benchmark results show the following execution rates: - **Spread Operator**: 36,490,768 executions/second. - **concat()**: 13,281,358 executions/second. This indicates that, in this particular test case, the spread operator is significantly faster than the `concat()` method. ### Pros and Cons - **concat()**: - **Pros**: - More explicit about its purpose of combining arrays, which may enhance code readability for some developers. - It works well with legacy code and environments where the spread operator is not supported. - **Cons**: - Slower performance in this benchmark. - It creates a new instance of the array for each call and can be less efficient with larger datasets. - **Spread Operator**: - **Pros**: - Faster performance, as shown in the benchmark results. - Allows for combining arrays in a concise manner and can be used to insert additional elements between arrays or manipulate elements more flexibly. - More modern syntax, which aligns with other ES6 features and may provide better clarity and maintainability. - **Cons**: - May not be supported in older browsers or environments, although compatibility is generally robust in modern JavaScript environments. ### Other Considerations - **Browsers and Environments**: Performance can vary based on the JavaScript engine implementation in different browsers. This benchmark was conducted on Chrome 131, which may not reflect behavior in other browsers like Firefox or Safari. - **Alternatives**: - Other methods for combining arrays include using array methods like `Array.prototype.push()` in conjunction with `apply()` or `forEach()`, but these can be more verbose and less performant compared to the spread operator and `concat()`. - Some developers might also consider using libraries like Lodash, which provides utility functions like `_.concat()` for combining arrays, although this typically adds additional overhead in bundling the library. In summary, this benchmark illustrates the performance differences between two popular methods for combining arrays in JavaScript, with the spread operator demonstrating a clear advantage in terms of speed.
Comments
Confirm delete:
Do you really want to delete benchmark?