Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.push Vs Array.concat vs spread
(version: 0)
Comparing spread, push and concat and find which is faster
Comparing performance of:
Array.concat vs Array.push vs ES6 Spread Operator
Created:
4 years ago
by:
Registered User
Jump to the latest result
Tests:
Array.concat
var arr1 = ['hello world', 123, true] var res = arr1.concat(['@gmail', 15,20000])
Array.push
var arr1 = ['hello world', 123, true] var res = Array.prototype.push.apply(arr1, ['@gmail', 15,20000])
ES6 Spread Operator
var arr1 = ['hello world', 123, true] var res = [...arr1,'@gmail', 15,20000]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.concat
Array.push
ES6 Spread Operator
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what is being tested, compared, and their pros and cons. **Benchmarked Operation: Array Manipulation** The test is comparing three different methods to add an element to an array: 1. `Array.push()` 2. `Array.concat()` 3. The ES6 spread operator (`...`) **Method Comparison:** * **`Array.push()`**: This method modifies the original array by adding a new element at the end and returns the length of the updated array. + Pros: Simple, efficient for small arrays. + Cons: Creates a new array internally, which can lead to unnecessary memory allocations. Also, it has higher overhead compared to other methods due to its use of `length` property and potential browser optimizations like tail call optimization. * **`Array.concat()`**: This method returns a new array containing all elements from the original array followed by the added elements. + Pros: Does not modify the original array, efficient for large arrays since it creates a new copy only once. + Cons: Creates an intermediate array, which can be slower than modifying the original array for small to medium-sized arrays. Also, it requires more memory compared to `push()` due to creating an additional array object. * **ES6 Spread Operator (`...`)**: This operator creates a new array by copying all elements from the original array and then adds new elements. + Pros: Efficiently creates a new array with minimal overhead. Does not modify the original array, making it suitable for preserving data integrity. + Cons: Requires support for ES6 syntax, which might be limited in older browsers. **Other Considerations:** * **Browser optimizations**: Modern browsers optimize `Array.push()` by reusing the internal array buffer to store new elements. However, this optimization is less effective than creating a new array using `Array.concat()` or the spread operator. * **Language features**: The test doesn't consider language-specific features like `let` and `const` declarations, which can impact variable scoping and performance. **Library/Function Considerations:** None of the tested operations rely on external libraries. However, some browsers might use internal optimizations that could affect the results, such as tail call optimization for `Array.push()`. **Special JS Features/Syntax:** The test uses ES6 syntax for the spread operator (`...`). While this is a standard feature in modern JavaScript, it's not supported in older browsers, which limits the benchmark's applicability.
Related benchmarks:
Array spread vs. push performance
concat vs spread operator vs push (big array)
Large Array concat vs spread operator vs push
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator vs push with spread
Comments
Confirm delete:
Do you really want to delete benchmark?