Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs Spread (Two Arrays)
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
spread operator vs concat into empty array
Created:
6 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var array1 = [ "hella", true, 7 ] var array2 = ["hallo", false, 5];
Tests:
spread operator
var other = [ ...array1, ...array2 ]
concat into empty array
var final = array1.concat(array2)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread operator
concat into empty array
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Browser/OS:
Chrome 139 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=615364" width="100%" height="500px"></iframe>
spread operator
38.5M/s
concat into empty array
13.8M/s
View exact numbers
Test name
Executions per second
✓
spread operator
38,492,340 Ops/sec
concat into empty array
13,796,088 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Definition and Purpose** The provided JSON represents a benchmark that compares two approaches for concatenating arrays: the traditional `concat()` method and the new ES6 spread operator (`...`). The purpose of this benchmark is to determine which approach is faster in JavaScript. **Options Compared** There are two test cases: 1. **Spread Operator (`[ ...array1, ...array2 ]`)**: This option uses the spread operator to concatenate `array1` and `array2`. It's a concise way to create a new array by copying elements from an existing array. 2. **Concat into Empty Array (`var final = array1.concat(array2)`)**: This option concatenates `array1` and `array2` using the `concat()` method, which creates a new array by copying elements from each input array. **Pros and Cons** * **Spread Operator**: Pros: + Concise and expressive syntax. + Creates a new array without modifying the original arrays. Cons: + Can be slower in older browsers or with large inputs due to the overhead of creating a new array. * **Concat into Empty Array**: Pros: + Often faster than the spread operator, especially for small inputs, since it avoids creating a new array. + Wide browser support, including older versions. Cons: + Less concise syntax, which can make code harder to read. **Library and Purpose (None in this case)** There are no external libraries used in this benchmark. The tests rely solely on built-in JavaScript features. **Special JS Feature or Syntax (Spread Operator)** The spread operator (`[ ...array1, ...array2 ]`) is a new feature introduced in ECMAScript 2015 (ES6). It allows you to create a new array by copying elements from an existing array. This syntax was not available in older versions of JavaScript. **Other Alternatives** If you need to concatenate arrays, there are other approaches: * Using `Array.prototype.push()`: `array1.push(...array2);` * Creating a new array using the `Array.from()` method: `Array.from(array1).concat(Array.from(array2))` Keep in mind that these alternatives may have different performance characteristics compared to the spread operator and the concat() method. I hope this explanation helps you understand the benchmark and its options!
Related benchmarks
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (new try)
Comments
Confirm delete:
Do you really want to delete benchmark?