Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push #4
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
spread operator vs Push
Created:
5 years ago
by:
Guest
Go to the latest result
Tests:
spread operator
var other = [ 1, 2 ] var other2 = [...other, 3] var other3 = [...other2, 4] var other4 = [...other3, 5] var other5 = [...other4, 6] var other6 = [...other5, 7]
Push
var other = [ 1, 2 ]; other.push(3); other.push(4); other.push(5); other.push(6); other.push(7);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread operator
Push
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/146.0.0.0 Safari/537.36
Browser/OS:
Chrome 146 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626989" width="100%" height="500px"></iframe>
Push
66.4M/s
spread operator
10.0M/s
View exact numbers
Test name
Executions per second
✓
Push
66,440,372 Ops/sec
spread operator
10,002,305 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested, compared, and the pros and cons of each approach. **Benchmark Overview** The benchmark compares three methods to concatenate an array: 1. **Push**: Using the `push()` method to add elements to the end of an array. 2. **Spread Operator (`...`)**: Using the new ES6 spread operator to create a new array with elements from another array. 3. **Concat** (not explicitly used in the provided benchmark, but mentioned in the initial benchmark definition): Using the `concat()` method to concatenate arrays. **Options Compared** The two main options being compared are: 1. **Push**: Adding elements to an existing array using the `push()` method. 2. **Spread Operator (`...`)**: Creating a new array with elements from another array using the spread operator. **Pros and Cons of Each Approach:** ### Push Pros: * Efficient for small arrays, as it only requires updating the internal array buffer. * Can be faster than creating a new array due to cache locality. Cons: * Creates a new internal array buffer each time an element is added, which can lead to memory fragmentation and garbage collection overhead for large arrays. * Not suitable for large datasets, as it can cause performance issues. ### Spread Operator (`...`) Pros: * Creates a new array with elements from another array, which can be more efficient than using `push()` for large datasets. * Allows for easier creation of arrays with multiple sources (e.g., `var arr = [1, 2, ...arr]`). Cons: * Can be slower than `push()` due to the overhead of creating a new array and copying elements. * May not perform as well on small arrays or when dealing with sparse arrays. **Library and Special JS Feature:** There is no explicit library mentioned in the provided benchmark. However, the use of the spread operator (`...`) is a feature introduced in ES6 (ECMAScript 2015). **Other Considerations:** * Cache locality: Both `push()` and the spread operator can benefit from cache locality, as they modify the internal array buffer. * Garbage collection overhead: Creating a new internal array buffer using `push()` can lead to increased garbage collection overhead for large arrays. **Alternative Approaches:** 1. **Concat**: Using the `concat()` method would have been an alternative approach, but it's not explicitly used in this benchmark. 2. **Array methods like `unshift()` or `splice()`: These methods can also be used to concatenate arrays, but their performance may vary depending on the specific use case. 3. **Other libraries or frameworks**: Depending on the specific requirements of the project, other libraries or frameworks might provide optimized implementations for array concatenation. In summary, the benchmark compares two approaches: `push()` and the spread operator (`...`). The choice between these two depends on the specific use case and performance requirements. While `push()` is efficient for small arrays, the spread operator can be more suitable for large datasets due to its ability to create a new array with elements from another array.
Related benchmarks
Array.prototype.concat vs spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator real
Comments
Confirm delete:
Do you really want to delete benchmark?