Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Adding elems to array
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs spread operator vs Push
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
var param = ["hello"] var other = [ 1, 2 ].concat(param);
spread operator
var param = "hello" var previous = [ 1, 2] var other = [...previous, param]
Push
var param = "hello" var other = [ 1, 2 ].push(param);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
Push
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 dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Overview** The benchmark is designed to compare three approaches for adding elements to an array: `concat()`, the spread operator (`...`), and the `push()` method. The test aims to determine which approach is the fastest among these three options. **Options Compared** 1. **Array.prototype.concat()**: This method creates a new array by copying all elements from the original array and appending the provided parameter. 2. **Spread Operator (`...`)**: This operator allows you to create a new array by spreading the elements of an existing array or object into a new one. 3. **Array.prototype.push()**: This method adds one or more elements to the end of an array. **Pros and Cons** 1. **concat()**: * Pros: widely supported, easy to use, but can be slow due to the overhead of creating a new array. * Cons: creates a new array object, which can lead to increased memory usage and slower performance. 2. **Spread Operator (`...`)**: * Pros: efficient, modern syntax, and creates a new array without the need for `concat()`. * Cons: requires support for the spread operator (introduced in ES6), and its performance may vary depending on the browser and use case. 3. **push()**: * Pros: efficient, no overhead like `concat()`, and modifies the existing array. * Cons: may not be as readable or maintainable due to the lack of explicit array manipulation. **Library Usage** None of the benchmarked methods rely on external libraries. **Special JS Features** The spread operator (`...`) is a modern JavaScript feature introduced in ES6. It allows for more concise and expressive code, but its adoption has been growing steadily across browsers and versions. **Benchmark Results** According to the latest benchmark results, the order of performance from fastest to slowest is: 1. `push()` 2. Spread Operator (`...`) 3. Array.prototype.concat() The push method appears to be the most efficient due to its ability to modify the existing array without creating a new one. The spread operator offers good performance as well, but slightly slower than push. The concat() method, while widely supported, takes the least amount of time. **Other Alternatives** If you're looking for alternative approaches to add elements to an array, consider: 1. `Array.prototype splice()`: similar to `push()` but modifies the existing array by replacing elements at a specified index. 2. `Array.prototype slice()`: creates a new array by extracting a portion of the original array, which can be used as an intermediate step or for specific use cases. Please note that these alternatives may not always outperform the benchmarked methods and should be evaluated based on their specific requirements and performance characteristics.
Related benchmarks:
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
Array concat vs. array spread
Array concat vs spread operator vs push #3
Array.prototype.concat vs spread operator real
Comments
Confirm delete:
Do you really want to delete benchmark?