Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array push vs spread vs concat
(version: 0)
When adding an element to an array, measure the performance of push, spread syntax and concat. The case is when original array must contain the new element, thus modifying it in process.
Comparing performance of:
Concat vs Push vs Spread syntax
Created:
7 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var arr = [4, 2, 1];
Tests:
Concat
arr = arr.concat(3);
Push
arr.push(3)
Spread syntax
arr = [...arr, 3]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Concat
Push
Spread syntax
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/119.0.0.0 Safari/537.36 OPR/105.0.0.0
Browser/OS:
Opera 105 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=489540" width="100%" height="500px"></iframe>
Push
14.2M/s
Concat
3K/s
Spread syntax
2/s
View exact numbers
Test name
Executions per second
✓
Push
14,180,134 Ops/sec
Concat
3,048 Ops/sec
Spread syntax
2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its test cases. **Benchmark Overview** The main goal of this benchmark is to compare the performance of three different ways to add an element to an array: `push`, `spread syntax` (also known as "rest parameter syntax"), and `concat`. The test case assumes that the original array must contain the new element, thus modifying it in the process. **Test Cases** There are three individual test cases: 1. **Concat**: This test case measures the performance of using the `concat()` method to add a new element to an array. 2. **Push**: This test case measures the performance of using the `push()` method to add a new element to an array. 3. **Spread syntax**: This test case measures the performance of using the spread syntax (e.g., `arr = [...arr, 3]`) to add a new element to an array. **Library: None** None of the test cases use any external libraries. **Special JS Feature/Syntax: Spread Syntax** The spread syntax is a relatively recent feature introduced in ECMAScript 2015. It allows you to create a new array by spreading the elements of an existing array into a new array. **Performance Comparison** When adding an element to an array, all three approaches have similar performance characteristics: * **Push**: This approach creates a new array and assigns it to the `arr` variable, while modifying the original array by incrementing its length. The operation has a constant time complexity of O(1), making it the fastest option. * **Concat**: This approach also creates a new array and returns it, while leaving the original array unchanged. However, since the original array is modified in the process (by having its length incremented), this operation has a slightly higher overhead compared to `push`. The time complexity is still O(n), where n is the number of elements in the array. * **Spread syntax**: This approach creates a new array and assigns it to the `arr` variable, while modifying the original array by assigning it a new value. The time complexity is similar to `concat`, which is O(n). **Pros and Cons** Here's a summary of the pros and cons of each approach: * **Push**: + Pros: Fastest, with a constant time complexity. + Cons: May have higher overhead due to the need to create a new array and increment the length of the original array. * **Concat**: + Pros: Easy to implement and understand. + Cons: Slightly slower than `push` due to the overhead of creating a new array. * **Spread syntax**: + Pros: Modern and concise way to add elements to an array. + Cons: Similar to `concat` in terms of performance. **Alternatives** If you're looking for alternative ways to add elements to an array, here are a few options: * **Array.prototype.splice()**: This method replaces the element at the specified position with the new value. It can be slower than `push` and `spread syntax`, but it's useful when you need to remove or replace multiple elements. * **Array.prototype.unshift()**: This method adds an element to the beginning of the array. It has a similar time complexity to `push`, but it may have higher overhead due to the need to create a new array and increment the length of the original array. In summary, when adding an element to an array, `push` is generally the fastest approach, followed by `concat` and then `spread syntax`. However, the choice of method ultimately depends on your specific use case and personal preference.
Related benchmarks
Array spread vs. push performance
Large Array: concat vs spread vs push
Comments
Confirm delete:
Do you really want to delete benchmark?