Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array push vs spread vs concat large
(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:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var arr1 = [4, 2, 1, 22, 27, 33, 88]; var arr2 = [4, 2, 1, 55, 53, 22, 44];
Tests:
Concat
arr1 = arr1.concat(arr2);
Push
arr1.push(arr2)
Spread syntax
arr1 = [...arr1, arr2]
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:
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):
**Overview of the Benchmark** The provided benchmark measures the performance of three different methods for adding an element to an array in JavaScript: `push`, `concat`, and spread syntax (`...`). The test case uses two arrays, `arr1` and `arr2`, with a total of 7 elements. **Options Compared** * **Push**: Uses the `push()` method to add an element to the end of the array. * **Concat**: Uses the `concat()` method to concatenate two arrays and return a new array. * **Spread Syntax**: Uses the spread operator (`...`) to create a new array by spreading the elements of the original array and adding the new element. **Pros and Cons** * **Push**: + Pros: Fast, efficient, and widely supported. It modifies the original array in place. + Cons: Can be slower than other methods for large arrays or when dealing with sparse arrays. * **Concat**: + Pros: Creates a new array and leaves the original array unchanged. Suitable for scenarios where immutability is desired. + Cons: Slower than `push` due to the creation of a new array, which can be costly in terms of memory allocation and garbage collection. * **Spread Syntax**: + Pros: Fast, efficient, and easy to read. It creates a new array without modifying the original one. + Cons: Requires support for modern JavaScript features (ECMAScript 2018 and later) and may not work in older browsers or environments. **Library Usage** In this benchmark, no external libraries are used. **Special JS Features/Syntax** * **Spread Syntax (`...`)**: This syntax was introduced in ECMAScript 2015 (ES6). It allows for creating new arrays by spreading the elements of an existing array. * **No special features/syntax**: The `push()` and `concat()` methods are built-in JavaScript methods that do not require any additional libraries or syntax. **Other Alternatives** * Other alternatives to `push` could include using `splice()` with a negative index, but this is generally less efficient than `push`. * For concatenating arrays, other alternatives might be using the `+` operator (which creates a new array by concatenating elements) or the `Array.prototype.reduce()` method. * Spread syntax has several alternative ways to achieve similar results, such as using `Array.from()` and pushing elements onto an existing array. **Benchmark Result** The latest benchmark result shows that: * **Push**: 4413375.5 executions per second * **Concat**: 1563.228759765625 executions per second ( significantly slower than push) * **Spread Syntax**: 2.609727144241333 executions per second (slightly faster than concat, but still slower than push) Keep in mind that these results are specific to the Chrome browser and may vary depending on other factors such as the size of the arrays, device performance, and JavaScript engine optimizations.
Related benchmarks:
Array spread vs. push performance
Array push vs spread vs concat
.concat vs. spread
Large Array: concat vs spread vs push
Comments
Confirm delete:
Do you really want to delete benchmark?