Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
My Spread vs Concat vs unshift vs push
(version: 0)
Benchmark.js
My Spread vs Concat vs unshift vs push
Comparing performance of:
arrayUnshift vs concat vs spread vs just push
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
arrayUnshift
const arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1.unshift(...arr2);
concat
let arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1 = arr1.concat(arr2);
spread
let arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1 = [...arr1, ...arr2];
just push
const arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1.push(...arr2);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
arrayUnshift
concat
spread
just push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0
Browser/OS:
Chrome 121 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=505722" width="100%" height="500px"></iframe>
just push
34.8M/s
spread
24.8M/s
arrayUnshift
8.2M/s
concat
7.6M/s
View exact numbers
Test name
Executions per second
✓
just push
34,762,220 Ops/sec
spread
24,833,298 Ops/sec
arrayUnshift
8,208,408 Ops/sec
concat
7,632,426 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested, along with the pros and cons of each approach. **Benchmark Overview** The benchmark compares the performance of four different methods to append an array to another array: 1. `unshift`: inserts elements at the beginning of the array 2. `concat`: creates a new array by concatenating two arrays 3. `spread` (also known as the rest parameter syntax): uses the spread operator (`...`) to create a new array from an existing one and append elements to it 4. `push`: appends elements to the end of the array **Library Used** In this benchmark, the library used is not explicitly mentioned. However, based on the code examples provided, it appears that the JavaScript engine being tested supports modern JavaScript features, such as rest parameters (`...`) and the spread operator. **Pros and Cons of Each Approach** 1. `unshift`: * Pros: can be faster for large arrays since it only needs to shift elements in the array, rather than creating a new one. * Cons: can be slower for small arrays since it involves shifting more elements, which can lead to cache misses. 2. `concat`: * Pros: creates a new array that is not modified in place, making it easier to use with certain data structures (e.g., objects). * Cons: can be slower than `unshift` for large arrays since it involves creating a new array and copying elements from the original one. 3. `spread`: * Pros: creates a new array that is not modified in place, making it easier to use with certain data structures (e.g., objects). * Cons: can be slower than `push` for large arrays since it involves creating a new array and appending elements to it. 4. `push`: * Pros: simple and efficient way to append elements to an array. * Cons: can lead to cache misses if the array is very large, since elements need to be shifted or copied. **Other Considerations** When choosing between these methods, consider the following: * If you need to modify a large array frequently, `unshift` might be a better choice for its potential performance benefits. * If you need to create a new array that is not modified in place, `concat`, `spread`, or `push` (if using an older JavaScript engine that doesn't support rest parameters) are good options. * If simplicity and readability are more important than performance, `push` might be the best choice. **Alternatives** Other alternatives to these methods include: * Using `Array.prototype.splice()` to remove elements from one array and add them to another * Using `Array.prototype.slice()` to create a new array with a subset of elements from an original array * Using `Array.prototype.reduce()` to append elements to an array However, these alternatives might have different performance characteristics or requirements depending on the specific use case. I hope this explanation helps! Let me know if you have any further questions.
Comments
Confirm delete:
Do you really want to delete benchmark?