Benchmark: Array concat vs spread operator vs push reassign

Tests:

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

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: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36

Browser/OS: Chrome 85 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8270152.0 Ops/sec
spread operator	29244918.0 Ops/sec
Push	25066142.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its results.

**Benchmark Definition**

The benchmark is designed to compare three ways of concatenating an array in JavaScript:

1. **`concat()` method**: A traditional way of concatenating arrays using the `concat()` method.
2. **Spread operator (`...`)**: The new ES6 spread operator, which allows for more concise and expressive array manipulation.
3. **`push()` method with spread syntax (`...`)**: Using the `push()` method to add elements to an existing array, followed by the spread operator.

**Options Compared**

The benchmark is comparing the performance of these three approaches on a fixed input:

```javascript
let params = [ "hello", true, 7 ];
```

Each approach is executed multiple times (not specified in the provided data) and their execution rates are measured in executions per second (`ExecutionsPerSecond`).

**Pros and Cons**

Here's a brief summary of each approach:

1. **`concat()` method**:
	* Pros: Widely supported, easy to use.
	* Cons: Creates a new array, which can lead to increased memory usage.
2. **Spread operator (`...`)**:
	* Pros: Concise and expressive, efficient in terms of memory usage.
	* Cons: New feature, may not be supported in older browsers or versions of JavaScript.
3. **`push()` method with spread syntax (`...`)**:
	* Pros: Efficient in terms of memory usage, still concise and expressive.
	* Cons: May require additional libraries or polyfills for support in older browsers.

**Library/Features Used**

The benchmark uses the following:

* `let` keyword (not specific to a library, part of modern JavaScript syntax).
* Spread operator (`...`) (new feature introduced in ECMAScript 2015).

**Special JS Features/Syntax**

The test cases utilize the spread operator (`...`), which is a relatively new feature introduced in ECMAScript 2015. The benchmark ensures that the results are not affected by older browsers or versions of JavaScript.

**Other Alternatives**

For comparison, other methods for concatenating arrays could include:

* Using `Array.prototype.concat()` with multiple arguments.
* Using `Array.prototype.push()` multiple times to add elements.
* Using a library like Lodash (`_.concat()`, `_merge()`).
* Using a different approach, such as using `Buffer.concat()` or another buffering mechanism.

However, these alternatives are not included in the benchmark, and their performance would depend on various factors, including the specific use case and requirements.

Related benchmarks:

Array concat vs spread operator vs push reassign (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>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):