Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs double spread operator vs push with 10 objects
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs double spread operator vs Push
Created:
6 years ago
by:
Registered User
Jump to the latest result
Tests:
Array.prototype.concat
var originArray = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }] var appendingArray = [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }, { id: 19 }, { id: 20 }]; originArray = originArray.concat(appendingArray);
double spread operator
var originArray = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }] var appendingArray = [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }, { id: 19 }, { id: 20 }]; originArray = [...originArray, ...appendingArray];
Push
var originArray = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }] var appendingArray = [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }, { id: 19 }, { id: 20 }]; originArray.push(...appendingArray);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.prototype.concat
double 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 benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations. **Benchmark Overview** The benchmark is comparing three ways to concatenate arrays: `Array.prototype.concat`, the double spread operator (`...`), and the `push` method with spreading (`...`). The test case uses two identical arrays, `originArray` and `appendingArray`, which are populated with 10 objects each. **Options Compared** 1. **Array.prototype.concat**: A traditional method for concatenating arrays, using the `concat()` function. 2. **Double Spread Operator (`...`)**: A new ES6 feature that allows spreading an array into multiple arguments for a function call or assignment. 3. **Push with Spreading (`...`)**: Using the `push()` method to add elements to an array and then spreading the resulting array using the double spread operator. **Pros and Cons of Each Approach** 1. **Array.prototype.concat**: * Pros: Wide browser support, simple to use. * Cons: Can create a new array object, potentially leading to memory issues if not used carefully. 2. **Double Spread Operator (`...`)**: * Pros: Concise syntax, efficient for small arrays. * Cons: Only available in modern browsers (since ES6), may have performance issues with large arrays due to the overhead of creating multiple array objects. 3. **Push with Spreading (`...`)**: * Pros: Efficient for large arrays, allows using `push()` and then spreading the resulting array. * Cons: Requires understanding of how `push()` works internally, may not be as readable as other approaches. **Other Considerations** * The benchmark is measuring the number of executions per second (ExecutionsPerSecond), which indicates the performance of each approach. Lower values indicate better performance. * The browser and device used for testing (Chrome 77 on Windows Desktop) might affect the results, so it's essential to consider different scenarios. * The benchmark doesn't account for memory usage or garbage collection, which could be relevant factors in a real-world application. **Libraries Used** None are explicitly mentioned in the provided JSON. However, `Array.prototype.concat()` is a built-in JavaScript method. **Special JS Features/Syntax** The double spread operator (`...`) is a new ES6 feature introduced in 2015. It allows spreading an array into multiple arguments for a function call or assignment.
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push with more data
Array concat vs spread operator vs push for single values
Array.prototype.concat vs spread operator real
Array.prototype.concat vs spread operator on large array
Comments
Confirm delete:
Do you really want to delete benchmark?