Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push - e
(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:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var current = [ "hello", true, 7 ]; var add = "bye";
Tests:
Array.prototype.concat
var other = current.concat([add]);
spread operator
var other = [...current, add];
Push
var other = [...current]; other.push(add);
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 break down the provided benchmark and its test cases. **Benchmark Definition** The benchmark measures the performance difference between three approaches: using the spread operator (`...`), `concat()`, and `push()` to concatenate an array with another value. The script preparation code initializes a variable `current` with an array containing three elements: "hello", `true`, and `7`. Another variable `add` is assigned the value `"bye"`. **Test Cases** There are three test cases: 1. **Array.prototype.concat**: This approach uses the `concat()` method to concatenate the `current` array with a new array containing the `add` value. 2. **Spread Operator**: This approach uses the spread operator (`...`) to create a new array by spreading the `current` array and appending the `add` value as another element. 3. **Push**: This approach first creates a copy of the `current` array using the spread operator (`[...current]`) and then appends the `add` value to it using the `push()` method. **Pros and Cons** Here's a brief overview of each approach: * **Array.prototype.concat**: + Pros: Wide browser support, easy to read and understand. + Cons: Can be slower for large arrays due to the overhead of creating a new array object. * **Spread Operator ( ... )**: + Pros: Fast and efficient for small to medium-sized arrays. Modern browsers have optimized it. + Cons: May not work as expected in older browsers that don't support it. * **Push**: + Pros: Can be faster than `concat()` for large arrays since it only modifies the existing array object. + Cons: Requires creating a copy of the array using the spread operator, which can still incur some overhead. **Library and Special JS Feature** In this benchmark, none of the libraries are used. However, it's worth noting that the use of modern JavaScript features like the spread operator requires supporting browsers (usually modern versions of Chrome or Firefox). **Other Considerations** When evaluating performance differences between these approaches, consider the following: * Array size: Larger arrays may benefit from `push()` due to reduced overhead, but small arrays might favor the spread operator. * Browser support: Ensure that your target browsers support the spread operator and other modern JavaScript features. * Code readability: While performance is crucial, code maintainability and readability should also be considered. **Alternatives** If you're looking for alternative approaches or want to explore other methods, consider: * Using `Array.prototype.set()` (not widely supported) or a library like Lodash's `concat` function. * Investigating other concatenation methods like using `String.fromCharCode()` followed by `new Uint8Array()` (less efficient and not recommended). * Comparing the performance of different array initialization methods, such as `var arr = [1, 2, 3];` versus `var arr = new Array(3).fill(0);`.
Related benchmarks:
ES6 Array concat vs spread operator
Array.prototype.concat vs spread operator vs push (no jQuery test)
Array spread (left) vs push
Array.prototype.concat vs spread operator (add)
Comments
Confirm delete:
Do you really want to delete benchmark?