Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
spread vs concat vs unshift vs flat
(version: 0)
Comparing performance of:
spread vs concat vs concat2 vs unshift vs unshift2 vs flat
Created:
2 years ago
by:
Guest
Jump to the latest result
Tests:
spread
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = [...a, ...b, ...c];
concat
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.concat(...b, ...c);
concat2
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.concat(b).concat(c);
unshift
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.unshift(...b, ...c);
unshift2
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.unshift(b).unshift(c);
flat
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = [a,b,c].flat();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (6)
Previous results
Fork
Test case name
Result
spread
concat
concat2
unshift
unshift2
flat
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):
Let's dive into the Benchmark Definition JSON and explain what is tested, compared, pros and cons of different approaches, and other considerations. **Benchmark Test Cases:** The test cases compare four ways to concatenate or merge arrays in JavaScript: 1. **Spread Operator (`...`)**: `const result = [...a, ...b, ...c];` 2. **Concatenation with Multiple Calls (`concat()`)**: `const result = a.concat(...b, ...c);` 3. **Concatenation with Nested Calls (`concat()`, `concat()` again)**: `const result = a.concat(b).concat(c);` 4. **Unshift Operator (`unshift()`)**: `const result = a.unshift(...b, ...c);` **Libraries Used:** None of the test cases use any external libraries. **Special JavaScript Features/Syntax:** * The spread operator (`...`) is used to expand an array into individual elements. * The concatenation operator (`+` or `+=`) is used to concatenate arrays. However, this is not explicitly shown in the code snippets, but rather implied by the use of multiple calls to `concat()`. * Unshift Operator (`unshift()`) modifies the original array and adds a new element at the beginning. **Comparison:** Each test case measures the performance of a different method for concatenating or merging arrays. The results show that: * Spread operator (`...`) is generally the fastest, especially for large arrays. * Concatenation with multiple calls (`concat()`) is slower than using the spread operator but faster than concatenation with nested calls. * Unshift Operator (`unshift()`) is significantly slower than all other methods. **Pros and Cons:** Here are some pros and cons of each method: * **Spread Operator (`...`)**: + Pros: Fast, efficient, and easy to read. + Cons: Requires compatibility with older browsers. * **Concatenation with Multiple Calls (`concat()`)**: + Pros: Compatible with older browsers. + Cons: Slower than using the spread operator. * **Concatenation with Nested Calls (`concat()`, `concat()` again)**: + Pros: May be more efficient due to fewer function calls. + Cons: Less readable and harder to maintain. * **Unshift Operator (`unshift()`)**: + Pros: None notable. + Cons: Slower, less compatible with older browsers. **Other Considerations:** * The test results may not reflect real-world scenarios where compatibility with older browsers is crucial. * Using `concat()` multiple times can lead to more function calls and slower performance.
Related benchmarks:
Array.prototype.concat vs Spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
unshift vs spread vs concat
spread vs concat vs unshift to join arrays
Array.prototype.concat vs spread operator 12
Comments
Confirm delete:
Do you really want to delete benchmark?