Benchmark: Array concat vs spread operator vs push with long arrays

Script Preparation code:

const ARRAY_LEN = 100000;
var array1 = Array(ARRAY_LEN, 'fill');
var array2 = Array(ARRAY_LEN, 'fill');

Tests:

Array.prototype.concat
array1 = array1.concat(array2);
spread operator
array1 = [ ...array1, ...array2 ]
Array.prototype.push
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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 120 on Android

View result in a separate tab

Array.prototype.push

3.3M/s

Array.prototype.concat

3K/s

spread operator

486/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.push	3,325,375 Ops/sec
Array.prototype.concat	2,908 Ops/sec
spread operator	486 Ops/sec

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 is being tested.

**Benchmark Overview**

The benchmark measures the performance of three different ways to concatenate or add elements to an array in JavaScript:

1. Using the `concat()` method
2. Using the spread operator (`...`)
3. Using the `push()` method with multiple arguments

**Options Compared**

Each test case compares two approaches:

* The first approach is a specific JavaScript method or syntax.
* The second approach is an alternative way to achieve the same result.

For example, in the first test case, `array1 = array1.concat(array2);` is compared to `[ ...array1, ...array2 ]`, which uses the spread operator. Similarly, in the second test case, `array1.push(...array2);` is compared to `[ ...array1, ...array2 ]`.

**Pros and Cons of Each Approach**

Here are some general pros and cons of each approach:

* **Concatenation using `concat()`**: This method creates a new array by copying the contents of both arrays. It can be slower than other methods because it involves creating a new object.
	+ Pros: Simple to use, works well for small arrays.
	+ Cons: Creates a new array, can be slow for large arrays.
* **Spread operator (`...`)**: This method creates a new array by copying the contents of both arrays and spreading them into a new array.
	+ Pros: Fast, efficient, and modern.
	+ Cons: Requires JavaScript syntax, may not work in older browsers or environments.
* **Pushing multiple elements with `push()`**: This method adds multiple elements to an existing array without creating a new one.
	+ Pros: Efficient, fast, and memory-friendly.
	+ Cons: Can be slower than other methods for very large arrays.

**Library Used**

There is no explicit library used in this benchmark. However, it's worth noting that the `concat()` method uses the internal array implementation of JavaScript, which may involve optimized native code or libraries under the hood.

**Special JS Feature or Syntax**

The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows for more concise and expressive way to create arrays from existing arrays or values. The `push()` method with multiple arguments also relies on the spread operator internally, which may make it seem like a new syntax.

**Other Alternatives**

Some alternative approaches that are not tested in this benchmark include:

* Using `Array.prototype.slice()` to create a shallow copy of an array.
* Using `Array.prototype.map()` or `Array.prototype.reduce()` to manipulate arrays.
* Using libraries like Lodash or Underscore.js for array manipulation.

These alternatives may have different performance characteristics, and it's worth considering them when choosing an approach depending on the specific use case.

Array concat vs spread operator vs push with long arrays (version: 0)

extends https://www.measurethat.net/Benchmarks/Show/4223

Comparing performance of: `Array.prototype.concat vs spread operator vs Array.prototype.push`

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Array.prototype.push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array concat vs spread operator vs push with long arrays (version: 0)

extends https://www.measurethat.net/Benchmarks/Show/4223

Comparing performance of: Array.prototype.concat vs spread operator vs Array.prototype.push

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Array.prototype.push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.concat vs spread operator vs Array.prototype.push`