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

Script Preparation code:

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

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; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0

Browser/OS: Firefox 75 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	274.7 Ops/sec
Spread operator	129.6 Ops/sec
Array.prototype.push	99329.9 Ops/sec
Array.prototype.push with assignment	105296.9 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 compares the performance of three approaches to concatenate arrays in JavaScript: `Array.prototype.concat`, the spread operator (`...`), and `Array.prototype.push`. The benchmark creates two arrays of length 100 using the spread operator and concatenates them with these three approaches.

**Options Compared**

1. **`Array.prototype.concat"`**: This method creates a new array by concatenating the elements of the original array with the elements of another array.
2. **Spread Operator (`...`)**: This syntax creates a new array by copying the elements of an existing array and adding them to a new array.
3. **`Array.prototype.push()`**: This method adds one or more elements to the end of an array.

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**:
	* Pros: Creates a new array, which can be beneficial for performance when working with large arrays.
	* Cons: Creates a new array object, which requires additional memory allocation and copying.
2. **Spread Operator (`...`)**:
	* Pros: Does not create a new array, instead modifies the original array, which reduces memory allocation and copying overhead.
	* Cons: Only works for creating a new array from an existing one; cannot be used to concatenate arrays of different lengths.
3. **`Array.prototype.push()`**:
	* Pros: Modifies the original array, reducing memory allocation and copying overhead.
	* Cons: Adds elements at the end of the array, which can lead to slower performance for large arrays.

**Library Used**

None explicitly mentioned in the benchmark definition or test cases.

**Special JS Features/Syntax**

The benchmark uses the spread operator (`...`) and `Array.prototype.push()` with assignment (`var x = ...`). The spread operator is a relatively modern feature introduced in ECMAScript 2015 (ES6), while `Array.prototype.push()` with assignment is a more recent addition to the language, introduced in ECMAScript 2019 (ES9).

**Other Considerations**

The benchmark uses two arrays of length 100, which may not be representative of real-world scenarios where array lengths can vary greatly.

**Alternatives**

1. **`Array.prototype.push()` without assignment**: This approach adds elements to the end of the array, but does not modify the original variable (e.g., `array1.push(...array2)`).
2. **`concat()` with a new array creation**: Instead of concatenating arrays using the spread operator or `push()`, you can create a new array and assign it to a variable using `Array.prototype.concat()`.
3. **Other array concatenation methods**: There are other ways to concatenate arrays in JavaScript, such as using the `slice()` method or the `Array.prototype.reduce()` method.

In summary, the benchmark provides a concise comparison of three common approaches to concatenate arrays in JavaScript, highlighting the trade-offs between memory allocation and copying overhead.

Related benchmarks:

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

Compare the spread operator vs concat and push with little-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):