Benchmark: push vs spread vs concat

Tests:

spread
let foo = []; let bar = [1,2,3,4,5,6,7,8,9,10]; for(let i = 0; i < 10; i++) foo = [...foo, ...bar];
push
let foo = []; let bar = [1,2,3,4,5,6,7,8,9,10]; for(let i = 0; i < 10; i++) foo.push(...bar);
concat
let foo = []; let bar = [1,2,3,4,5,6,7,8,9,10]; for(let i = 0; i < 10; i++) foo = foo.concat(bar);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
push
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36

Browser/OS: Chrome 89 on Windows 7

View result in a separate tab

Test name	Executions per second
spread	782397.8 Ops/sec
push	1874407.5 Ops/sec
concat	439001.8 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing three ways to append elements to an array in JavaScript: `push`, `spread` (using the spread operator), and `concat`. The test creates an initial empty array, populates it with a fixed set of values, and then uses a loop to append these values to the end of the array using each of the three methods.

**Test Options Compared**

1. **`push()`**: This method appends one or more elements to the end of an array.
2. **`spread()` (using the spread operator `...`)**: This method creates a new array by spreading the elements of another array.
3. **`concat()`**: This method returns a new array containing the elements of the original array and then the elements of any additional arrays.

**Pros and Cons of Each Approach**

1. **`push()`**:
	* Pros: Fast, efficient, and widely supported.
	* Cons: Can be slower than `spread()` for large arrays because it involves an array mutation operation.
2. **`spread()` (using the spread operator `...`)**:
	* Pros: Modern, efficient, and easy to read.
	* Cons: Requires a modern JavaScript engine that supports the spread operator.
3. **`concat()`**:
	* Pros: Wide support across older browsers and engines.
	* Cons: Can be slower than `push()` because it involves an array mutation operation and creates a new array.

**Library Usage**

None of the test cases use any external libraries or dependencies, other than the built-in JavaScript language features.

**Special JS Features/Syntax**

None of the test cases use any special JavaScript features or syntax that require advanced knowledge of JavaScript. The spread operator (`...`) is used to create a new array by spreading elements from another array, which is a relatively modern feature introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

If you were to write this benchmark yourself, you could also consider using other methods for appending elements to an array, such as:

* Using `Array.prototype.push.apply()` or `Array.prototype.unshift()`
* Creating a new array with the `Array.from()` method and then using `push()` or `concat()`
* Using a library like Lodash's `_.union()` method

However, these alternatives are less common and may not be as widely supported across different browsers and engines.

Related benchmarks:

push vs spread vs concat (version: 0)

Comparing performance of: spread vs push vs concat

Created: 3 years ago by: Guest

Jump to the latest result

spread

push

concat

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