Benchmark: My Spread vs Concat vs unshift vs push

Tests:

arrayUnshift
const arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1.unshift(...arr2);
concat
let arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1 = arr1.concat(arr2);
spread
let arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1 = [...arr1, ...arr2];
just push
const arr1 = [1,2,3,4,5]; const arr2 = [6,7,8,9,10]; arr1.push(...arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arrayUnshift
concat
spread
just push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
arrayUnshift	8208407.5 Ops/sec
concat	7632426.5 Ops/sec
spread	24833298.0 Ops/sec
just push	34762220.0 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's being tested, along with the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares the performance of four different methods to append an array to another array:

1. `unshift`: inserts elements at the beginning of the array
2. `concat`: creates a new array by concatenating two arrays
3. `spread` (also known as the rest parameter syntax): uses the spread operator (`...`) to create a new array from an existing one and append elements to it
4. `push`: appends elements to the end of the array

**Library Used**

In this benchmark, the library used is not explicitly mentioned. However, based on the code examples provided, it appears that the JavaScript engine being tested supports modern JavaScript features, such as rest parameters (`...`) and the spread operator.

**Pros and Cons of Each Approach**

1. `unshift`:
	* Pros: can be faster for large arrays since it only needs to shift elements in the array, rather than creating a new one.
	* Cons: can be slower for small arrays since it involves shifting more elements, which can lead to cache misses.
2. `concat`:
	* Pros: creates a new array that is not modified in place, making it easier to use with certain data structures (e.g., objects).
	* Cons: can be slower than `unshift` for large arrays since it involves creating a new array and copying elements from the original one.
3. `spread`:
	* Pros: creates a new array that is not modified in place, making it easier to use with certain data structures (e.g., objects).
	* Cons: can be slower than `push` for large arrays since it involves creating a new array and appending elements to it.
4. `push`:
	* Pros: simple and efficient way to append elements to an array.
	* Cons: can lead to cache misses if the array is very large, since elements need to be shifted or copied.

**Other Considerations**

When choosing between these methods, consider the following:

* If you need to modify a large array frequently, `unshift` might be a better choice for its potential performance benefits.
* If you need to create a new array that is not modified in place, `concat`, `spread`, or `push` (if using an older JavaScript engine that doesn't support rest parameters) are good options.
* If simplicity and readability are more important than performance, `push` might be the best choice.

**Alternatives**

Other alternatives to these methods include:

* Using `Array.prototype.splice()` to remove elements from one array and add them to another
* Using `Array.prototype.slice()` to create a new array with a subset of elements from an original array
* Using `Array.prototype.reduce()` to append elements to an array

However, these alternatives might have different performance characteristics or requirements depending on the specific use case.

I hope this explanation helps! Let me know if you have any further questions.

Related benchmarks:

My Spread vs Concat vs unshift vs push (version: 0)

My Spread vs Concat vs unshift vs push

Comparing performance of: arrayUnshift vs concat vs spread vs just push

Created: 2 years ago by: Guest

Jump to the latest result

arrayUnshift

concat

spread

just push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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