Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push (many numbers)
(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
Tests:
Array.prototype.concat
var params = [ "hello", true, 7, 1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7, 1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7, 1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9 ]; var other = [ 1, 2 ].push(...params);
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! The provided JSON represents a benchmark test comparing three approaches to concatenate or push an array: `Array.prototype.concat`, the spread operator (`...`), and `push()`. We'll break down each approach, its pros and cons, and discuss any notable libraries or special features used. **1. Array.prototype.concat** This is the traditional way of concatenating arrays in JavaScript. It creates a new array by copying elements from both input arrays. Pros: * Well-supported across browsers * Easy to understand Cons: * Creates a new array object, which can be memory-intensive for large datasets * Can lead to slower performance compared to other methods **2. Spread Operator (`...`)** The spread operator is a new feature introduced in ES6 (ECMAScript 2015). It allows you to expand an iterable (like an array) into individual elements. Pros: * Efficient, as it creates a new array object only when necessary * Convenient syntax for creating new arrays Cons: * May have slower performance compared to traditional `concat()` due to the overhead of the spread operator * Not supported in older browsers (e.g., Internet Explorer) **3. Push()** The `push()` method is used to add one or more elements to an array and returns the new length of the array. Pros: * Efficient, as it modifies the existing array object * Convenient syntax for adding multiple elements Cons: * May have slower performance compared to traditional `concat()` due to the overhead of modifying the array * Not suitable for concatenating arrays with different lengths **Other Considerations** * **Memory allocation**: When using `push()`, the browser needs to allocate memory for each new element added to the array. This can be a concern when dealing with large datasets. * **Array references**: When using `concat()` or spread operator, the resulting array object is created and returned as reference. However, if you assign this new array to a variable, it will not affect the original array objects being concatenated. **Notable Libraries** In this benchmark test, there are no notable libraries used. The tests focus solely on native JavaScript methods. **Special Features (None)** There are no special features or syntaxes introduced in these tests. Now, let's look at some alternative approaches for concatenating arrays: * **Array.prototype.slice()**: This method creates a shallow copy of the array and returns it. * **Array.prototype.set()**: This method is not supported in older browsers (e.g., Internet Explorer) and is generally considered an outdated approach. * **Array.prototype.push.apply() / push.call()**: These methods allow you to apply multiple elements to the end of an array using `push()`. In conclusion, while all three approaches have their pros and cons, the spread operator (`...`) provides a convenient syntax for creating new arrays while being efficient. However, it's essential to consider factors like browser support, memory allocation, and array references when choosing the best approach for your specific use case.
Related benchmarks:
Array.prototype.concat vs spread operator
Array.prototype.concat vs Spread operator
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
Comments
Confirm delete:
Do you really want to delete benchmark?