Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push vs new array spread
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs Push vs New array spread
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ] other = other.concat(params);
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ] other = other.push(...params);
New array spread
var params = [ "hello", true, 7 ] var other = [ 1, 2 ] var other = [ ...other, ...params ]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.prototype.concat
Push
New array spread
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.1:latest
, generated one year ago):
Let's dive into the explanation. **Benchmark Description** The benchmark is called "Array concat vs spread operator vs push vs new array spread". It compares four different ways to concatenate two arrays in JavaScript: `concat()`, spread operator (`...`), `push()` with rest parameter, and creating a new array using the spread operator. **Test Cases** There are three test cases: 1. **Array.prototype.concat**: This test uses the traditional `concat()` method to merge two arrays. * Code snippet: `other = other.concat(params);` * Library/Language feature: None * Description: Simply concatenates two arrays using the `concat()` method. 2. **Push**: This test uses the `push()` method with rest parameter to add elements from one array to another. * Code snippet: `other = other.push(...params);` * Library/Language feature: None * Description: Uses the `push()` method with rest parameter to add elements from one array to another. 3. **New array spread**: This test uses the spread operator (`...`) to create a new array by spreading the contents of two arrays. * Code snippet: `var other = [ ...other, ...params ];` * Library/Language feature: Spread operator (`...`) * Description: Creates a new array by spreading the contents of two arrays using the spread operator. **Benchmark Results** The latest benchmark results show the execution speed (Executions Per Second) for each test case on Chrome 89: 1. **Push**: 30,568,930 executions per second 2. **New array spread**: 26,185,424 executions per second 3. **Array.prototype.concat**: 7,132,648 executions per second **Pros and Cons** * `concat()` method: + Pros: Easy to understand, widely supported. + Cons: Slow compared to other methods. * Spread operator (`...`): + Pros: Fastest method in this benchmark, creates a new array without modifying the original arrays. + Cons: May cause performance issues if used excessively due to its overhead of creating a new array. * `push()` with rest parameter: + Pros: Simple, easy to use. Modifies the original array. + Cons: Slow compared to spread operator. **Other Considerations** * If you need to concatenate arrays frequently, consider using the spread operator (`...`) for performance benefits. * If you're working with large arrays and performance is critical, avoid using `concat()` or `push()` methods. * The spread operator can also be used with objects, not just arrays. **Alternatives** If you don't want to use the spread operator or any of the above methods, you could consider: 1. Using `Array.prototype.set()` (ES2022) to update an array in place. 2. Implementing a custom concatenation function for performance-critical scenarios. 3. Avoiding complex operations on arrays and using other data structures instead (e.g., linked lists).
Related benchmarks:
Array.prototype.concat vs spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
ES6 Array concat vs spread operator
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator real
Comments
Confirm delete:
Do you really want to delete benchmark?