Benchmark: Array concat vs spread operator vs push (Super Big Array)

Script Preparation code:

var params = [];
for (var i = 0; i < 10000; i++) {
  params.push('String'+i);
}

Tests:

Array.prototype.concat
var other = [ 1, 2 ].concat(params);
spread operator
var other = [ 1, 2, ...params ]
Push
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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	394351.0 Ops/sec
spread operator	38696.0 Ops/sec
Push	64930.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares three ways to concatenate an array in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. The `push()` method with the spread operator (`...`)

**Script Preparation Code**

The script preparation code creates a large array `params` by pushing 10,000 string values onto it, starting from "String0" to "String9999".

**Html Preparation Code**

There is no HTML preparation code provided.

**Individual Test Cases**

Each test case consists of a benchmark definition and a test name. The benchmark definitions are:

1. **Array.prototype.concat**: Concatenates the `params` array with an existing array `[ 1, 2 ]`.
```javascript
var other = [ 1, 2 ].concat(params);
```
2. **Spread Operator**: Uses the spread operator (`...`) to concatenate the `params` array with an existing array `[ 1, 2 ]`.
```javascript
var other = [ 1, 2, ...params ];
```
3. **Push**: Uses the push method with the spread operator (`...`) to concatenate the `params` array with an existing array `[ 1, 2 ]`.
```javascript
var other = [ 1, 2 ].push(...params);
```
**Library Used**

There is no external library used in this benchmark.

**Special JavaScript Features/Syntax**

None mentioned.

**Test Results**

The latest test results show the execution per second for each browser and device platform:

* **Array.prototype.concat**: 160,965.91 executions/second (Chrome 97 on Desktop, Mac OS X 10.14.6)
* **Spread Operator**: 24,366.64 executions/second (Chrome 97 on Desktop, Mac OS X 10.14.6)
* **Push**: 18,370.35 executions/second (Chrome 97 on Desktop, Mac OS X 10.14.6)

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. `Array.prototype.concat()`:
	* Pros: Well-established method, easy to use.
	* Cons: Can be slower than other methods due to its overhead.
2. **Spread Operator**: (`...`)
	* Pros: New and efficient way to concatenate arrays, eliminates the need for intermediate arrays.
	* Cons: Requires support for the spread operator, which was introduced in ES6.
3. **Push**: With Spread Operator:
	* Pros: Combines the efficiency of push with the new spread operator syntax.
	* Cons: Can be slower than `concat()` due to the additional operation.

**Other Alternatives**

If you're interested in alternative approaches for concatenating arrays, here are a few:

1. `Array.prototype.splice()`: This method modifies the original array by inserting elements at a specified position.
2. `Array.prototype.reduce()`: This method can be used to concatenate arrays by using an accumulator function.

However, these alternatives might not be as efficient or convenient as the three approaches being compared in this benchmark.

Related benchmarks:

Array concat vs spread operator vs push (Super Big Array) (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: 4 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):