Benchmark: spread vs concat vs unshift for arrays

Script Preparation code:

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

Tests:

arrayUnshift123
array.unshift(...array2);
arrayConcat123
array = array.concat(array2)
arraySpread123
array = [...array2 , ...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arrayUnshift123
arrayConcat123
arraySpread123

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
arrayUnshift123	16791.3 Ops/sec
arrayConcat123	1910.6 Ops/sec
arraySpread123	80.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided JSON represents a benchmark test case that compares three different approaches to add elements to an array in JavaScript:

1. `array.unshift(...array2);`
2. `array = array.concat(array2)`
3. `[...array, ...array2]` (using the spread operator)

**Options being compared:**

Each option has its own pros and cons:

* **`array.unshift(...array2);`**: This approach adds elements to the beginning of the array. The main advantage is that it can be more efficient when inserting multiple elements at once, as `unshift` only creates a new array with the elements in the correct order, without shifting all existing elements. However, this approach can lead to memory allocation overhead for large arrays.
* **`array = array.concat(array2)`**: This approach concatenates two arrays and assigns the result back to the original array. The main disadvantage is that it creates a new array object each time, which can be inefficient for large datasets. Additionally, `concat` may not preserve the original array's properties or methods.
* **`[...array, ...array2]` (using the spread operator)**: This approach uses the spread operator to create a new array by copying elements from the original array and adding the elements from the second array. The main advantage is that it creates a shallow copy of the arrays, which can be more efficient in terms of memory allocation. However, this approach may not preserve the original array's properties or methods.

**Library usage:**

None of the provided options rely on any external libraries.

**Special JS features/syntax:**

The spread operator (`[...array, ...array2]`) is used to create a new array by spreading elements from an existing array. This feature was introduced in ECMAScript 2015 (ES6) as part of the syntax.

**Other alternatives:**

Some alternative approaches for adding elements to an array include:

* Using `push` or `splice`: These methods add elements to the end or at a specific position in the array, respectively.
* Using `Array.prototype.set`: This method sets all elements in an array to new values (not applicable in this case).
* Using `Array.prototype.slice` and `concat`: While not exactly the same as using `push` or `splice`, these methods can achieve similar results.

It's worth noting that the choice of approach depends on the specific use case, such as performance requirements, memory constraints, or desired behavior.

Related benchmarks:

spread vs concat vs unshift for arrays (version: 0)

spread vs concat vs unshift

Comparing performance of: arrayUnshift123 vs arrayConcat123 vs arraySpread123

Created: 6 years ago by: Guest

Jump to the latest result

arrayUnshift123

arrayConcat123

arraySpread123

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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