Benchmark: unshift vs concat vs spread of another array

Script Preparation code:

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

Tests:

unshift an array
array.unshift(...x)
concat an array
array.concat(x)
spread on array
array = [...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:

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 Edg/131.0.0.0

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

unshift an array

23K/s

concat an array

3K/s

spread on array

98/s

View exact numbers

Test name	Executions per second
✓ unshift an array	22,840 Ops/sec
concat an array	2,948 Ops/sec
spread on array	98 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 JSON and explain what's being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is testing three different ways to perform an operation on an array:

1. `unshift`: Inserting elements at the beginning of an array.
2. `concat`: Concatenating two arrays using the `[...]` spread operator or the `+` operator.
3. `spread`: Spreading another array into the existing one.

**Script Preparation Code**

The script preparation code defines a sample array `array` and another array `x`, which will be used as input for the benchmark.

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

**Individual Test Cases**

There are three test cases:

1. `unshift an array`: Tests the performance of using `array.unshift(x)`.
2. `concat an array`: Tests the performance of using `array.concat(x)`.
3. `spread on array`: Tests the performance of using `array = [...x, ...array]`.

**Library and Features**

None of the test cases use any external libraries. However, the `concat` method is a built-in JavaScript method.

The benchmark uses a feature called "spread operator" which was introduced in ECMAScript 2015 (ES6). The spread operator (`[...]`) allows you to expand an array or object into a new array or object.

**Pros and Cons**

Here are the pros and cons of each approach:

1. `unshift`:
	* Pros: Can be more efficient for large arrays, as it only requires shifting elements to the right.
	* Cons: Requires multiple operations (pushing and then shifting) which can lead to performance issues if not implemented correctly.
2. `concat`:
	* Pros: Simple and straightforward implementation.
	* Cons: Requires creating a new array, which can be memory-intensive for large arrays.
3. `spread`:
	* Pros: Efficient and concise implementation, as it only requires creating a new array with the desired elements.
	* Cons: May not work correctly if the input array is very large (due to maximum call stack size limitations).

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Performance requirements: If you need to process large arrays, `unshift` might be a better choice. For smaller arrays or more concise code, `spread` could be preferred.
* Code readability and maintainability: If code readability is crucial, using `concat` with explicit array creation might be a better option.

**Alternatives**

If you're not satisfied with the current benchmark or want to explore alternative approaches, consider these options:

1. Use a different JavaScript implementation (e.g., Node.js, V8)
2. Test with different arrays sizes or shapes
3. Implement each method with a custom loop (instead of built-in methods like `unshift` and `concat`)
4. Explore other array manipulation techniques, such as using `map`, `filter`, or `reduce`

Keep in mind that the benchmark's results are specific to Chrome 120 running on Windows Desktop. Running the benchmark on different platforms or browsers might yield different performance characteristics.

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

unshift vs concat vs spread of another array

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

Created: 6 years ago by: Guest

Go 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

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

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

unshift vs concat vs spread of another array

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

Created: 6 years ago by: Guest

Go 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

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

Related benchmarks

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