Benchmark: Array push vs spread vs concat large

Script Preparation code:

var arr1 = [4, 2, 1, 22, 27, 33, 88];
var arr2 = [4, 2, 1, 55, 53, 22, 44];

Tests:

Concat
arr1 = arr1.concat(arr2);
Push
arr1.push(arr2)
Spread syntax
arr1 = [...arr1, arr2]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Push
Spread syntax

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/109.0.0.0 Safari/537.36 Edg/109.0.1518.78

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
Concat	1563.2 Ops/sec
Push	4413375.5 Ops/sec
Spread syntax	2.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of three different methods for adding an element to an array in JavaScript: `push`, `concat`, and spread syntax (`...`). The test case uses two arrays, `arr1` and `arr2`, with a total of 7 elements.

**Options Compared**

* **Push**: Uses the `push()` method to add an element to the end of the array.
* **Concat**: Uses the `concat()` method to concatenate two arrays and return a new array.
* **Spread Syntax**: Uses the spread operator (`...`) to create a new array by spreading the elements of the original array and adding the new element.

**Pros and Cons**

* **Push**:
	+ Pros: Fast, efficient, and widely supported. It modifies the original array in place.
	+ Cons: Can be slower than other methods for large arrays or when dealing with sparse arrays.
* **Concat**:
	+ Pros: Creates a new array and leaves the original array unchanged. Suitable for scenarios where immutability is desired.
	+ Cons: Slower than `push` due to the creation of a new array, which can be costly in terms of memory allocation and garbage collection.
* **Spread Syntax**:
	+ Pros: Fast, efficient, and easy to read. It creates a new array without modifying the original one.
	+ Cons: Requires support for modern JavaScript features (ECMAScript 2018 and later) and may not work in older browsers or environments.

**Library Usage**

In this benchmark, no external libraries are used.

**Special JS Features/Syntax**

* **Spread Syntax (`...`)**: This syntax was introduced in ECMAScript 2015 (ES6). It allows for creating new arrays by spreading the elements of an existing array.
* **No special features/syntax**: The `push()` and `concat()` methods are built-in JavaScript methods that do not require any additional libraries or syntax.

**Other Alternatives**

* Other alternatives to `push` could include using `splice()` with a negative index, but this is generally less efficient than `push`.
* For concatenating arrays, other alternatives might be using the `+` operator (which creates a new array by concatenating elements) or the `Array.prototype.reduce()` method.
* Spread syntax has several alternative ways to achieve similar results, such as using `Array.from()` and pushing elements onto an existing array.

**Benchmark Result**

The latest benchmark result shows that:

* **Push**: 4413375.5 executions per second
* **Concat**: 1563.228759765625 executions per second ( significantly slower than push)
* **Spread Syntax**: 2.609727144241333 executions per second (slightly faster than concat, but still slower than push)

Keep in mind that these results are specific to the Chrome browser and may vary depending on other factors such as the size of the arrays, device performance, and JavaScript engine optimizations.

Related benchmarks:

Array push vs spread vs concat large (version: 0)

When adding an element to an array, measure the performance of push, spread syntax and concat. The case is when original array must contain the new element, thus modifying it in process.

Comparing performance of: Concat vs Push vs Spread syntax

Created: 4 years ago by: Guest

Jump to the latest result

Concat

Push

Spread syntax

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):