Benchmark: concat vs unshift vs spread

Script Preparation code:

var array = [1,2,3];

Tests:

arrayUnshift123
array.unshift(0);
arrayConcat123
array = [0].concat(array)
spread
array = [0,...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arrayUnshift123
arrayConcat123
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
arrayUnshift123	31335.6 Ops/sec
arrayConcat123	1229.5 Ops/sec
spread	149.2 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 benchmark and explain what is being tested.

The benchmark is comparing three approaches to concatenate or modify an array:

1. `array.unshift(0);`
2. `array = [0].concat(array)`
3. `[0,...array]`

These approaches are being compared in terms of performance, specifically execution speed.

**Unshift Approach (array.unshift(0))**

This approach adds a new element to the beginning of the array using the `unshift()` method. The purpose of adding 0 is likely to make it easier to measure the effect of unshifting on the array size.

Pros:

* Simple and straightforward implementation
* No need to create a new array

Cons:

* May incur additional overhead due to modifying the original array's position
* Performance may degrade if the array needs to be frequently resized

**Concatenation Approach (array = [0].concat(array))**

This approach creates a new array by concatenating an existing array with a single-element array containing 0.

Pros:

* Creates a new array, avoiding potential modifications to the original array
* Can be more efficient if the original array is not frequently resized

Cons:

* Requires creating a new array, which can incur overhead
* May lead to increased memory allocation and deallocation

**Spread Approach ([0,...array])**

This approach uses the spread operator (`...`) to create a new array by spreading the elements of the original array.

Pros:

* Creates a new array without modifying the original array's position
* Can be more efficient if the original array is not frequently resized

Cons:

* May incur additional overhead due to creating a new array and dealing with spread syntax

**Library/Functionality Considerations**

None of these approaches rely on specific libraries or functions beyond JavaScript's built-in array methods.

**Special JS Feature/Syntax Consideration**

There are no special features or syntaxes being used in this benchmark. The focus is solely on comparing three basic array modification approaches.

**Other Alternatives**

For a more comprehensive benchmark, you might consider including additional approaches, such as:

* Using `Array.prototype.push()` with an initial value
* Using `Array.prototype.splice()` to modify the original array
* Creating a new array using `Array.from()`
* Using a library like Lodash's `cloneDeep()` or `merge()` functions

These alternatives might provide more nuanced insights into performance characteristics, but may also add complexity to the benchmark.

Related benchmarks:

concat vs unshift vs spread (version: 0)

spread vs concat vs unshift

Comparing performance of: arrayUnshift123 vs arrayConcat123 vs spread

Created: 6 years ago by: Guest

Jump to the latest result

arrayUnshift123

arrayConcat123

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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