Benchmark: array update push vs spread vs concat

Script Preparation code:

var array = [].fill(0, 10, 100)
var array2 = [].fill(0, 20, 100)

Tests:

push
array.push(...array2)
spread
array = [...array, ...array2]
concat
array = array.concat(array2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
push
spread
concat

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The benchmark is designed to compare three different ways to append an array `array2` to another array `array`. The three methods being compared are:

1. Using `push()` with spread syntax (`...`)
2. Using spread syntax (`[...array, ...array2]`)
3. Using the `concat()` method

**What is tested**

The benchmark measures the performance of each method on a large array (10 elements) and its equivalent larger array (20 elements). The test cases are designed to capture the overhead introduced by each method.

**Options compared**

* **Push with spread syntax**: This method uses the spread operator (`...`) to create a new array by concatenating `array` and `array2`. It's a concise way to append elements to an array.
	+ Pros: Easy to read, concise, efficient.
	+ Cons: May incur additional overhead due to the creation of a new array object.
* **Spread syntax**: This method uses the spread operator (`[...array, ...array2]`) to create a new array by concatenating `array` and `array2`. It's a more explicit way to append elements to an array.
	+ Pros: More control over the resulting array, efficient.
	+ Cons: May be less readable than the push with spread syntax method.
* **Concat()**: This method uses the `concat()` method to concatenate `array` and `array2`. It's a traditional way to merge arrays.
	+ Pros: Well-established, easy to understand.
	+ Cons: May incur additional overhead due to the creation of new array objects.

**Library**

None. No external libraries are used in this benchmark.

**Special JS feature/syntax**

None mentioned in this benchmark. However, note that spread syntax (`...`) is a relatively recent addition to JavaScript (introduced in ES6) and may not be supported by older browsers or environments.

**Other alternatives**

In addition to these three methods, other ways to append elements to an array include:

* Using `Array.prototype.push.apply()`
* Using `Array.prototype.splice()`
* Using `Array.prototype.unshift()` followed by `Array.prototype.slice()`

These alternatives may have varying levels of performance and readability compared to the three methods being tested.

**Benchmark preparation code**

The benchmark preparation code creates two arrays, one with 10 elements and another with 20 elements, using `Array.prototype.fill()`:
```javascript
var array = [].fill(0, 10, 100)
var array2 = [].fill(0, 20, 100)
```
This code prepares the input data for the benchmark tests.

**Individual test cases**

Each test case measures the execution time of a specific method:

* **Push with spread syntax**: `array.push(...array2)`
* **Spread syntax**: `array = [...array, ...array2]`
* **Concat()**: `array = array.concat(array2)`

These test cases capture the performance differences between each method.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 OPR/73.0.3856.329

Browser/OS: Opera 73 on Windows

View result in a separate tab

Test name	Executions per second
push	4827877.0 Ops/sec
spread	2797246.0 Ops/sec
concat	2021052.0 Ops/sec

Related benchmarks:

array update push vs spread vs concat (version: 0)

Comparing performance of: push vs spread vs concat

Created: 3 years ago by: Guest

Jump to the latest result

push

spread

concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):