Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator on large array
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
Array.prototype.concat vs spread operator
Created:
2 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var array = new Array(10000).fill(1) var toConcat = new Array(5000).fill(2)
Tests:
Array.prototype.concat
var other = array.concat(toConcat);
spread operator
var other = [ ...array, ...toConcat ]
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:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0
Browser/OS:
Firefox 137 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=599317" width="100%" height="500px"></iframe>
Array.prototype.concat
148K/s
spread operator
17K/s
View exact numbers
Test name
Executions per second
✓
Array.prototype.concat
147,926 Ops/sec
spread operator
17,281 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **What is being tested?** The benchmark compares two approaches for concatenating arrays: 1. The traditional `Array.prototype.concat()` method 2. The new ES6 spread operator (`...`) The test creates a large array `array` with 10,000 elements filled with the value `1`, and another large array `toConcat` with 5,000 elements filled with the value `2`. It then uses these arrays to concatenate them using both methods. **Options compared** The benchmark compares two options: a. **Array.prototype.concat()**: This is a traditional method for concatenating arrays in JavaScript. It creates a new array and copies the elements from both input arrays into it. b. **Spread operator (`...`)**: This is a new feature introduced in ES6 that allows you to expand an iterable (such as an array) into separate arguments to a function, or to use its elements as individual values in an expression. **Pros and Cons of each approach** a. **Array.prototype.concat()**: Pros: * Well-established and widely supported * Can be used with any type of object that supports the `concat()` method Cons: * Creates a new array, which can lead to increased memory usage * May not be as efficient as other approaches for very large arrays b. **Spread operator (`...`)**: Pros: * More concise and expressive than traditional concatenation methods * Can be more efficient than creating a new array using `concat()` Cons: * Only works with arrays, not with all types of iterables * May have performance issues if used with very large arrays or complex data structures **Library usage** There is no explicit library usage in this benchmark. However, it's worth noting that the spread operator relies on the `Array.prototype` prototype chain, which is a built-in part of JavaScript. **Special JS feature/syntax** The benchmark uses the ES6 spread operator (`...`). If you're not familiar with this feature, here's a brief explanation: When used in an expression, the spread operator allows you to expand an iterable into separate arguments. For example: ```javascript var array = [1, 2, 3]; var other = [...array, 4, 5]; // creates a new array: [1, 2, 3, 4, 5] ``` In the benchmark, the spread operator is used to concatenate the `toConcat` array with the `array` using the syntax `[ ...array, ...toConcat ]`. **Other alternatives** If you're interested in exploring alternative approaches for concatenating arrays, here are a few options: 1. Using `Array.prototype.push()` and passing multiple elements: `array.push(...toConcat)` 2. Using `Array.prototype.concat()` with an array literal: `[...array].concat([...toConcat])` 3. Using a custom implementation that avoids creating a new array or using the spread operator. Keep in mind that each of these alternatives has its own trade-offs and may not be suitable for all use cases.
Related benchmarks
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (new try)
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?