Benchmark: Array concat vs spread operator vs push reassign v2

Tests:

Array.prototype.concat
let params = [ "hello", true, 7 ]; params.concat([ 1, 2 ]);
spread operator
let params = [ "hello", true, 7 ] params = [ ...params, 1, 2 ]
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	7952336.5 Ops/sec
spread operator	26247218.0 Ops/sec
Push	24669426.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 provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three approaches for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. `push()` method with reassigning the array (`params.push(...[ 1, 2 ])`)

These approaches are being compared because they have different performance characteristics and use cases.

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**:
	* Pros: Widely supported, simple to understand, and works with any type of array.
	* Cons: Creates a new array object, which can lead to increased memory usage and slower performance for large arrays.
2. **Spread Operator (`...`)**:
	* Pros: Fast, efficient, and modern syntax that's gaining popularity.
	* Cons: Requires JavaScript 2015 or later, and might not work with older browsers or environments that don't support it.
3. **`push()` method with reassigning the array**:
	* Pros: Works in older browsers and environments where `concat()` is not supported.
	* Cons: Can be slower than the spread operator, as it involves a function call and an extra operation.

**Library Usage**

None of these approaches rely on external libraries. They are all built-in JavaScript features or methods.

**Special JS Features/Syntax**

The benchmark uses the modern spread operator (`...`) syntax, which is supported in ECMAScript 2015 and later versions. If you're using an older version of JavaScript, this syntax might not work for you.

**Other Alternatives**

If you need to concatenate arrays but want to avoid these specific approaches:

* You can use `Array.prototype.reduce()` method: `params = [ ...params, 1, 2 ].reduce((acc, val) => [...acc, val], [])`
* You can use a custom implementation of array concatenation using loops and indexing.

Keep in mind that for most use cases, the spread operator is now the recommended way to concatenate arrays. However, it's essential to consider your target audience, browsers, or environments when choosing an approach.

Related benchmarks:

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