Benchmark: unshift vs concat vs spread of new array

Script Preparation code:

var array = [2,3,4];
var x = [-1,0,1];

Tests:

unshift an array
var newArr = [...array] newArr.unshift(...x)
concat an array
var newArr = [...x] var result = newArr.concat(array)
spread on array
var newArr = [...x, ...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
unshift an array
concat an array
spread on array

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, hosted on MeasureThat.net, compares the performance of three different approaches for manipulating arrays in JavaScript:

1. Unshifting (`Array.prototype.unshift()` method)
2. Concatenating (`Array.prototype.concat()` method)
3. Spreading a new array (`Array.prototype spread` operator)

**Approach Descriptions and Pros/Cons**

### 1. Unshift

```javascript
var newArr = [...array].unshift(...x);
```

Pros:

* Creates a new copy of the original array, which can be beneficial for certain use cases where you want to preserve the original array's integrity.
* Can be more readable when working with complex arrays or objects.

Cons:

* Requires creating a new array using the spread operator (`[...array]`), which can add overhead due to the creation of a new array object.
* May not be as efficient as other approaches for very large arrays, as it requires creating an additional copy.

### 2. Concatenating

```javascript
var newArr = [...x].concat(array);
```

Pros:

* Does not create a new copy of the original arrays, making it more memory-efficient than unshift.
* Can be faster for large arrays since it uses a single operation to concatenate.

Cons:

* Requires creating two intermediate arrays using the spread operator (`[...x]` and `array`), which can add overhead due to array creation.
* May not be as readable when working with complex data structures or multiple operations.

### 3. Spreading on Array

```javascript
var newArr = [...x, ...array];
```

Pros:

* Does not create any additional arrays or copies of the original data.
* Can be more readable and concise than other approaches for simple cases.

Cons:

* Creates a new array by concatenating the two input arrays using the spread operator (`[...x]` and `array`), which can add overhead due to array creation.
* May not preserve the original order of elements, especially when dealing with complex data structures.

**Library and Framework Considerations**

None of the provided approaches rely on any external libraries or frameworks beyond the standard JavaScript Array prototype methods. However, if you're working with a specific library or framework that might optimize or modify these operations (e.g., React's `useMemo` hook), it could affect performance in certain scenarios.

**Special JS Features and Syntax**

None of the provided approaches utilize any special JavaScript features or syntax beyond the standard language features used by MeasureThat.net.

Related benchmarks:

unshift vs concat vs spread of new array (version: 0)

Comparing performance of: unshift an array vs concat an array vs spread on array

Created: 3 years ago by: Guest

Jump to the latest result

unshift an array

concat an array

spread on array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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