Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
.unshift() vs .push() + .reverse()23456
(version: 1)
Comparing performance of:
.unshift() vs .push() + reverse()
Created:
one year ago
by:
Guest
Go to the latest result
Script Preparation code:
window.ELE_PER_CYCLE = 12;
Tests:
.unshift()
const reps = window.ELE_PER_CYCLE; const arr = []; for (let i = 0; i < reps; ++i) { arr.unshift(i); }
.push() + reverse()
const reps = window.ELE_PER_CYCLE; const arr = []; for (let i = 0; i < reps; ++i) { arr.push(i); } arr.reverse();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
.unshift()
.push() + reverse()
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/137.0.0.0 Safari/537.36 OPR/122.0.0.0 (Edition developer)
Browser/OS:
Opera 122 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=614761" width="100%" height="500px"></iframe>
.push() + reverse()
15.6M/s
.unshift()
1.7M/s
View exact numbers
Test name
Executions per second
✓
.push() + reverse()
15,606,490 Ops/sec
.unshift()
1,739,960 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
### Benchmark Overview This benchmark compares the performance of two different methods for adding elements to an array in JavaScript: using `.unshift()` and using `.push()` in combination with `.reverse()`. ### Test Cases Explained 1. **`.unshift()`**: - **Benchmark Definition**: The test initializes an empty array `arr` and then, in a loop that runs `reps` times, it prepends numbers to the front of the array using the `.unshift()` method. - **Behavior**: The `.unshift()` method adds one or more elements to the beginning of an array and returns the new length of the array. This operation can be costly, especially when the array grows large because adding to the front may necessitate shifting all existing elements to higher indexes. 2. **`.push()` + `.reverse()`**: - **Benchmark Definition**: Similar to the first test, this initializes an empty array `arr`, adding numbers to it in a loop using the `.push()` method. After all numbers are added, `.reverse()` is called to reverse the array order. - **Behavior**: The `.push()` method appends one or more elements to the end of the array and returns the new length, which is a relatively efficient operation. The subsequent `.reverse()` method then reverses the array in place. ### Performance Comparison - **Performance Results**: - **`.push() + .reverse()`** has a significantly higher execution count (`15,548,916` executions per second). - **`.unshift()`** performs much worse, with only (`1,791,102.375` executions per second). ### Pros and Cons #### `.unshift()` - **Pros**: - Simplicity for adding items to the front of an array without needing a secondary operation. - **Cons**: - Performance is poor for larger arrays due to the need to shift all other elements, leading to O(n) time complexity for each insertion. #### `.push() + .reverse()` - **Pros**: - More efficient for bulk additions when needing items to be in a reversed order afterwards, taking advantage of the efficient O(1) insertion time for `.push()` followed by a single O(n) operation during `.reverse()`. - Overall often results in better runtime characteristics when appending many items. - **Cons**: - Requires a separate operation to achieve the final desired order (the `.reverse()` call). ### Other Considerations - **Memory Consumption**: Using `.unshift()` could lead to higher memory allocations over time, especially in a situation with many insertions at the front. - **Readability**: For cases where clarity and ease of understanding are valued over performance, `.unshift()` can be more direct for adding elements to the front. ### Alternatives 1. **Using a Linked List**: If frequent insertions at the beginning of a sequence are necessary, a linked list may be a better data structure, allowing O(1) insertions without shifting the whole array. 2. **Deque (Double-Ended Queue)**: Not natively available in JavaScript, it represents a data structure that allows efficient additions and removals from both ends. 3. **Batching Operations**: If inserting elements in order is essential, considering a batch process where you gather elements and perform a single operation might be useful, especially in performance-critical applications. ### Conclusion This benchmark aims to highlight the differences in performance between two common array manipulation methods in JavaScript. Developers can take insight from these results, especially when optimizing for large data sets or scenarios where insertion speed is crucial.
Related benchmarks
arr unshift vs push + reverse (small array)
.unshift() vs .push() + .reverse()
arr unshift vs push + reverse (mid array)
arr unshift vs push + reverse (100 elements)
arr unshift vs push + reverse (size 20 array)
Comments
Confirm delete:
Do you really want to delete benchmark?