Benchmark: Array.prototype.concat vs spread operator vs spread push vs multiple push

Script Preparation code:

var params = [ "hello", true, 7 ];
var existingArray = [1, 2];

Tests:

Array.prototype.concat
var other = existingArray.concat(params);
Multiple spread
var other = [ ...existingArray, ...params ]
Push spread
var other = existingArray.push(...params);
Multiple push
var other = params.forEach(function (item) { existingArray.push(item); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Multiple spread
Push spread
Multiple push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and analyzed.

**Benchmark Overview**

The benchmark compares the performance of three approaches to concatenate arrays in JavaScript:

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

**Library Used: None**

This benchmark does not rely on any external libraries, making it a vanilla JavaScript test.

**Special JS Feature/Syntax**

The spread operator and the spread push method were introduced in ECMAScript 2015 (ES6). They provide a concise way to create new arrays by spreading existing ones or pushing elements onto an array.

**Benchmark Test Cases**

Each test case measures the performance of one specific approach. The test cases are:

1. `Array.prototype.concat()`: Concatenates two arrays using the traditional method.
2. `Multiple spread` (`[ ...existingArray, ...params ]`): Creates a new array by spreading both existing and new arrays.
3. `Push spread` (`existingArray.push(...params)`): Pushes elements onto an existing array using the spread operator.
4. `Multiple push`: Iterates over the new array and pushes each element onto the existing array.

**Comparison**

The benchmark compares these four approaches to measure their performance differences:

* **Concatenation**: The traditional method of concatenating arrays, which creates a new array by merging both input arrays.
* **Spread Operator**: Creates a new array by spreading both input arrays.
* **Push Spread**: Pushes elements onto an existing array using the spread operator.

**Pros and Cons**

Here's a brief overview of each approach:

1. `Array.prototype.concat()`:
	* Pros: Simple, widely supported, and efficient for small to medium-sized datasets.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. Spread Operator (`[ ...existingArray, ...params ]`):
	* Pros: Concise, flexible, and efficient for creating new arrays.
	* Cons: May not perform well on very large datasets due to the overhead of creating an intermediate array.
3. Push Spread (`existingArray.push(...params)`):
	* Pros: Efficient for modifying existing arrays, as it only requires a single push operation.
	* Cons: Can lead to slower performance if the resulting array is too large.

**Results**

The latest benchmark results show that:

* `Multiple spread` outperforms all other approaches, with an average of 4.66 executions per second on a Chrome 70 browser running on a Mac OS X 10.13.6 machine.
* `Push spread` follows closely behind, averaging around 3.03 executions per second.

**Alternatives**

Other alternatives for concatenating or modifying arrays include:

* Using the `Array.from()` method to create a new array from an iterable source.
* Employing libraries like Lodash or Ramda for more complex array operations.
* Utilizing WebAssembly (WASM) for high-performance array computations.

Keep in mind that these alternatives may come with additional dependencies, complexity, and performance trade-offs.

Related benchmarks:

Array.prototype.concat vs spread operator vs spread push vs multiple push (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs Multiple spread vs Push spread vs Multiple push

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Multiple spread

Push spread

Multiple push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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