Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
concat vs [...spread]
(version: 0)
Comparing performance of:
concat 100 vs spread 100 vs concat 1000 vs spread 1000 vs concat 10000 vs spread 10000
Created:
7 years ago
by:
Guest
Jump to the latest result
Tests:
concat 100
const a = Array.from(new Array(100)) const b = Array.from(new Array(100)) const c = a.concat(b)
spread 100
const a = Array.from(new Array(100)) const b = Array.from(new Array(100)) const c = [...a, ...b]
concat 1000
const a = Array.from(new Array(1000)) const b = Array.from(new Array(1000)) const c = a.concat(b)
spread 1000
const a = Array.from(new Array(1000)) const b = Array.from(new Array(1000)) const c = [...a, ...b]
concat 10000
const a = Array.from(new Array(10000)) const b = Array.from(new Array(10000)) const c = a.concat(b)
spread 10000
const a = Array.from(new Array(10000)) const b = Array.from(new Array(10000)) const c = [...a, ...b]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (6)
Previous results
Fork
Test case name
Result
concat 100
spread 100
concat 1000
spread 1000
concat 10000
spread 10000
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** The provided benchmark measures the performance difference between two ways of concatenating arrays in JavaScript: 1. `concat()`: The traditional way of concatenating arrays using the `concat()` method. 2. `[...spread]` (also known as spread syntax or rest parameter): A new way of concatenating arrays introduced in ECMAScript 2015, which allows you to spread an array into individual elements. **Options compared** The benchmark compares two options: * Traditional `concat()`: This is the older way of concatenating arrays, where the `+` operator or the `concat()` method is used to join two arrays. * Spread syntax (`[...spread]`): This is a more modern and concise way of concatenating arrays, introduced in ECMAScript 2015. It uses the spread operator (`...`) to expand an array into individual elements. **Pros and cons of each approach** **Traditional `concat()`**: Pros: * Wide compatibility across older browsers and versions. * Easy to read and understand for developers familiar with the method. Cons: * Can be slower than the modern spread syntax due to the overhead of creating a new array. * May not be as concise or readable for complex concatenations. **Spread syntax (`[...spread]`)**: Pros: * Faster execution speed compared to traditional `concat()`. * More concise and expressive, making it easier to read and write code. * Compatible with modern browsers and ECMAScript versions. Cons: * May not be supported in older browsers or versions (e.g., Internet Explorer 11). * Requires some developers to learn the new syntax. **Other considerations** When using spread syntax, it's essential to note that the order of elements matters. The spread operator preserves the original array's index and key ordering, which can lead to unexpected behavior if not used carefully. In general, the spread syntax is a good choice when concatenating arrays with known sizes or when you want to avoid creating intermediate arrays. However, for cases where size doesn't matter (e.g., when working with variable-length arrays), traditional `concat()` might still be preferred due to its simplicity and readability. **Library usage** There are no libraries used in this benchmark. **Special JavaScript features or syntax** The spread syntax (`[...spread]`) is a relatively new feature introduced in ECMAScript 2015. It's called "rest parameter" or "spread operator," depending on the context. This syntax allows you to expand an array into individual elements using the `...` symbol. For example: ```javascript const arr = [1, 2, 3]; const newArr = [...arr, 4, 5]; // equivalent to newArr = arr.concat([4, 5]) ``` This syntax is widely supported in modern browsers and ECMAScript versions.
Related benchmarks:
Array.prototype.concat vs Spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
ES6 Array concat vs spread operator
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator 12
Comments
Confirm delete:
Do you really want to delete benchmark?