Benchmark: concat vs spread operator vs push (medium array)

Script Preparation code:

var array1 = [...Array(1000).keys()] // [0, 1, 2, ..., 999]
var array2 = [...Array(1000).keys()] // [0, 1, 2, ..., 999]

Tests:

Array.prototype.concat
array1 = array1.concat(array2)
Spread operator
array1 = [...array1, array2]
Array.prototype.push
array1.push(...array2)
Array.prototype.push with assignment
var x = array1.push(...array2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Spread operator
Array.prototype.push
Array.prototype.push with assignment

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36

Browser/OS: Chrome 85 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	90.3 Ops/sec
Spread operator	1.7 Ops/sec
Array.prototype.push	10378.4 Ops/sec
Array.prototype.push with assignment	10775.9 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 provided benchmark and explain what is being tested.

**Benchmark Description**

The benchmark compares three ways to concatenate or append an array in JavaScript:

1. Using the `concat` method: This involves calling the `concat` method on the first array (`array1`) and passing the second array (`array2`) as an argument.
2. Using the spread operator (`...`): This involves using the spread operator to create a new array that includes all elements from both `array1` and `array2`.
3. Using the `push` method with array assignment: This involves calling the `push` method on `array1` and passing an array literal that includes elements from both `array1` and `array2`.

**Options Comparison**

Here's a comparison of these three approaches:

* **Pros and Cons of each approach:**
	+ `concat`: This method can be slower than the spread operator because it creates a new array. However, it can also be more memory-efficient if you're working with large arrays.
	+ Spread operator (`...`): This method is often faster than `concat` because it avoids creating a new array and instead modifies the original array. However, it requires that both arrays have the same length and type of elements.
	+ `push` with array assignment: This method can be slower than using the spread operator because it involves creating an intermediate array and then pushing elements onto the first array.
* **Other considerations:**
	+ Performance: The spread operator is often considered the fastest way to concatenate arrays in modern JavaScript engines.
	+ Memory efficiency: `concat` is generally more memory-efficient than the spread operator, especially when working with large arrays.
	+ Code readability: The spread operator can make code more concise and readable, but it requires that both arrays have the same length and type of elements.

**Libraries and Special Features**

None of the individual test cases use any external libraries or special features in JavaScript.

**Alternative Approaches**

Other ways to concatenate arrays in JavaScript include:

* Using `Array.prototype.slice()` method to create a new array: `var newArray = array1.slice(0, array1.length + array2.length);`
* Using `Array.prototype.splice()` method to modify the original array: `array1.splice(array1.length, 0, ...array2)`
* Using a loop to iterate over elements from both arrays and push them onto the first array

It's worth noting that these alternative approaches may have different performance characteristics compared to the spread operator or `concat` method.

Related benchmarks:

concat vs spread operator vs push (medium array) (version: 0)

Compare the spread operator vs concat and push with medium arrays.

Comparing performance of: Array.prototype.concat vs Spread operator vs Array.prototype.push vs Array.prototype.push with assignment

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Spread operator

Array.prototype.push

Array.prototype.push with assignment

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