Benchmark: Array concat vs spread operator vs push mine

Tests:

Array.prototype.concat
var params = [ 3 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ 3 ] var other = [ 1, 2, ...params ]
Push
var other = [ 1, 2 ].push(3);

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

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

Browser/OS: Firefox 88 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	13688393.0 Ops/sec
spread operator	13736609.0 Ops/sec
Push	22722558.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

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

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

**Options Compared**

* **`Array.prototype.concat()`**: This is the traditional way of concatenating arrays using the `concat()` method.
* **Spread Operator (`...`)**: Introduced in ES6, this operator allows you to expand an array into a new array by including all elements from the original array.
* **Manual `push()` method**: In this approach, each element is pushed onto the end of the existing array using the `push()` method.

**Pros and Cons**

* **`Array.prototype.concat()`**:
	+ Pros: Wide browser support, easy to use.
	+ Cons: Can be slower for large arrays due to the overhead of creating a new array object.
* **Spread Operator (`...`)**:
	+ Pros: Efficient, readable, and concise.
	+ Cons: Requires ES6 compatibility, might not work in older browsers.
* **Manual `push()` method**:
	+ Pros: Can be faster for large arrays since it only updates the existing array.
	+ Cons: More verbose, less readable.

**Library Usage**

None of the test cases use a specific library. They rely on built-in JavaScript features and standard library functions.

**Special JS Features/Syntax**

The spread operator (`...`) is the only feature that requires ES6 compatibility. This means that browsers older than Firefox 88 (the one running this benchmark) might not support it.

**Other Alternatives**

For larger arrays or performance-critical code, you might also consider using other methods like:

* `Array.prototype.set()`: A more modern way of updating an array's length and filling its elements.
* `Array.from()`: Creating a new array from an existing iterable.
* Optimized libraries like Lodash's `concat` function.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and target browser support.

Related benchmarks:

Array concat vs spread operator vs push mine (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: 3 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 2 months ago):