Benchmark: Adding items to an array

Adding items to an array (version: 5)

spread vs concat vs unshift vs push There was also push.apply, but the browsers kept running out of memory for those tests. It worked only once. Here's a comparison with just the push results: arrayPush 4763922.0 Ops/sec arrayPush.apply 2666974.0 Ops/sec

Comparing performance of: arrayUnshift vs arrayConcat vs arraySpread vs arrayPush

Created: 4 years ago by: Registered User

Jump to the latest result

Script Preparation code:

var array = [1,2,3];
var array2 = [4,5,6];

Tests:

arrayUnshift
array.unshift(...array2);
arrayConcat
array = array.concat(array2)
arraySpread
array = [...array, ...array2]
arrayPush
array.push(...array2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arrayUnshift
arrayConcat
arraySpread
arrayPush

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.99 Safari/537.36 Vivaldi/2.9.1705.41

Browser/OS: Chrome 78 on Windows

View result in a separate tab

Test name	Executions per second
arrayUnshift	16288.0 Ops/sec
arrayConcat	489.5 Ops/sec
arraySpread	187.9 Ops/sec
arrayPush	4542563.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of four different ways to add elements to an array: `unshift`, `concat`, `spread` (using the rest operator), and `push`. The test is designed to compare the execution speed of these methods in modern web browsers.

**Options Compared**

* `array.unshift(array2)`: This method adds all elements from `array2` at the beginning of the `array`.
* `array.concat(array2)`: This method creates a new array by concatenating `array` and `array2`.
* `array = [...array, ...array2]`: This is an array spread operation using the rest operator. It adds all elements from `array2` to the end of `array`.
* `array.push(...array2)`: This method adds all elements from `array2` at the end of the `array`.

**Pros and Cons**

* **`unshift`**: Pros: efficient for adding elements to the beginning of an array. Cons: can be slower than other methods due to the need to shift existing elements.
* **`concat`**: Pros: simple and easy to understand. Cons: creates a new array, which can lead to memory allocation issues if not used carefully.
* **`spread`**: Pros: concise and modern way of adding elements to an array. Cons: may be slower due to the creation of a temporary array.
* **`push`**: Pros: efficient for adding elements to the end of an array. Cons: can be slower than `unshift` if used with large arrays.

**Library Used**

None in this specific benchmark, but it's worth noting that some libraries like Lodash or Ramda may provide similar functionality using different methods (e.g., `lodash.array.unshift`, `ramda.concat`).

**Special JS Feature/Syntax**

The benchmark uses the rest operator (`...`) to perform the array spread operation. This feature was introduced in ECMAScript 2015 (ES6) and allows for concise way of adding elements to an array.

**Other Alternatives**

* Other methods like `array.splice()` or `array.insertAt()` could also be used to add elements to an array.
* If you need more control over the insertion process, you might consider using a library like jQuery's `.pushStack()` method.

Overall, this benchmark provides a useful comparison of different ways to add elements to an array in modern web browsers. It helps identify which methods are fastest and most efficient for specific use cases.

Related benchmarks:

Adding items to an array (version: 5)

spread vs concat vs unshift vs push There was also push.apply, but the browsers kept running out of memory for those tests. It worked only once. Here's a comparison with just the push results: arrayPush 4763922.0 Ops/sec arrayPush.apply 2666974.0 Ops/sec

Comparing performance of: arrayUnshift vs arrayConcat vs arraySpread vs arrayPush

Created: 4 years ago by: Registered User

Jump to the latest result

arrayUnshift

arrayConcat

arraySpread

arrayPush

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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