Benchmark: Array concat vs double spread operator vs push

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var arr = [1, 2] var other = [ ...arr, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:124.0) Gecko/20100101 Firefox/124.0

Browser/OS: Firefox 124 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	31932274.0 Ops/sec
spread operator	23398080.0 Ops/sec
Push	37057240.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the test cases and provide an explanation of what's being tested, along with the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares three approaches for concatenating or adding elements to an array: the traditional `concat()` method, the spread operator (`...`), and the `push()` method.

**Test Cases**

1. **Array.prototype.concat**
```javascript
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params);
```
This test case uses the `concat()` method to concatenate an array `[1, 2]` with an array `params`. The `concat()` method creates a new array by copying all elements from both arrays and returns it.

Pros: This approach is widely supported and well-established in JavaScript. It's also relatively efficient since it doesn't require creating multiple copies of the array.

Cons: This approach requires more memory since it creates a new array with all elements from both input arrays.

2. **Spread Operator (...)
```javascript
var params = [ "hello", true, 7 ];
var arr = [1, 2];
var other = [...arr, ...params];
```
This test case uses the spread operator (`...`) to concatenate an array `arr` with an array `params`. The spread operator creates a new array by copying all elements from both arrays and returns it.

Pros: This approach is concise and efficient since it only requires creating a single copy of the resulting array. It's also modern syntax that many developers are familiar with.

Cons: This approach might not be supported in older browsers or environments that don't support modern JavaScript features.

3. **Push**
```javascript
var params = [ "hello", true, 7 ];
var arr = [1, 2];
var other = arr.push(...params);
```
This test case uses the `push()` method to add elements to an array `arr` and return a new array with the added elements.

Pros: This approach is concise and efficient since it only requires updating the existing array in place. It also returns the new length of the array, which can be useful for some use cases.

Cons: This approach might not be suitable for all scenarios, such as when you need to preserve the original order or create a new array with the added elements.

**Library Usage**

There is no explicit library usage in these test cases. However, it's worth noting that the `concat()` method and the spread operator (`...`) are built-in JavaScript methods, while the `push()` method is also a built-in method.

**Special JS Feature/Syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It's designed to make it easier to create new arrays from existing arrays or other iterables. The syntax `arr.push(...params)` uses this feature, but it's not specific to the ES6 syntax.

**Other Alternatives**

Other alternatives for concatenating or adding elements to an array include:

* Using `Array.prototype.splice()` method to replace a subset of elements in an array.
* Using a library like Lodash or Underscore.js, which provide various utility functions for working with arrays and other data structures.
* Using a loop-based approach to manually iterate over the input arrays and build the resulting array.

However, these alternatives might not be as concise or efficient as the three approaches tested in this benchmark.

Related benchmarks:

Array concat vs double spread operator vs push (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: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):