Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
spread vs concat vs unshift for arrays
(version: 0)
spread vs concat vs unshift
Comparing performance of:
arrayUnshift123 vs arrayConcat123 vs arraySpread123
Created:
6 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var array = [1,2,3,4,5,6,7,8,9]; var array2 = [1,1,1];
Tests:
arrayUnshift123
array.unshift(...array2);
arrayConcat123
array = array.concat(array2)
arraySpread123
array = [...array2 , ...array]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
arrayUnshift123
arrayConcat123
arraySpread123
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Browser/OS:
Chrome 143 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
arrayUnshift123
16791.3 Ops/sec
arrayConcat123
1910.6 Ops/sec
arraySpread123
80.3 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. **What is being tested?** The provided JSON represents a benchmark test case that compares three different approaches to add elements to an array in JavaScript: 1. `array.unshift(...array2);` 2. `array = array.concat(array2)` 3. `[...array, ...array2]` (using the spread operator) **Options being compared:** Each option has its own pros and cons: * **`array.unshift(...array2);`**: This approach adds elements to the beginning of the array. The main advantage is that it can be more efficient when inserting multiple elements at once, as `unshift` only creates a new array with the elements in the correct order, without shifting all existing elements. However, this approach can lead to memory allocation overhead for large arrays. * **`array = array.concat(array2)`**: This approach concatenates two arrays and assigns the result back to the original array. The main disadvantage is that it creates a new array object each time, which can be inefficient for large datasets. Additionally, `concat` may not preserve the original array's properties or methods. * **`[...array, ...array2]` (using the spread operator)**: This approach uses the spread operator to create a new array by copying elements from the original array and adding the elements from the second array. The main advantage is that it creates a shallow copy of the arrays, which can be more efficient in terms of memory allocation. However, this approach may not preserve the original array's properties or methods. **Library usage:** None of the provided options rely on any external libraries. **Special JS features/syntax:** The spread operator (`[...array, ...array2]`) is used to create a new array by spreading elements from an existing array. This feature was introduced in ECMAScript 2015 (ES6) as part of the syntax. **Other alternatives:** Some alternative approaches for adding elements to an array include: * Using `push` or `splice`: These methods add elements to the end or at a specific position in the array, respectively. * Using `Array.prototype.set`: This method sets all elements in an array to new values (not applicable in this case). * Using `Array.prototype.slice` and `concat`: While not exactly the same as using `push` or `splice`, these methods can achieve similar results. It's worth noting that the choice of approach depends on the specific use case, such as performance requirements, memory constraints, or desired behavior.
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
concat vs unshift vs spread
Concat vs Spread (Two Arrays)
unshift vs spread vs concat
Array.prototype.concat vs spread operator (new try)
Comments
Confirm delete:
Do you really want to delete benchmark?