Benchmark: Using Splice vs Spread vs Unshift to insert at beginning of array

Script Preparation code:

var array = Array.from({ length: 100 }).map((val, i) => i);

Tests:

Splice
var newArray = array.splice(0, 0, 99);
Spread
var newArray = [99, ...array];
Unshift
var newArray = array.unshift(99);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice
Spread
Unshift

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Splice	22203.1 Ops/sec
Spread	248.2 Ops/sec
Unshift	22140.7 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmark test case on MeasureThat.net. The test measures the performance of three different approaches to insert an element at the beginning of an array: `splice`, `spread`, and `unshift`. Here's a breakdown of each approach:

1. **Splice**: `array.splice(0, 0, 99)` creates a new array by copying the elements from the original array (excluding the first one) and then adds a new element at the beginning. This method is slower than the others because it involves creating a new array.
2. **Spread**: `[99, ...array]` uses the spread operator to create a new array with the new element inserted at the beginning. This method is faster than `splice` but still slower than `unshift`.
3. **Unshift**: `array.unshift(99)` modifies the original array by adding an element at the beginning. This method is the fastest because it only requires updating the reference of the first element in the array.

**Pros and Cons:**

*   `Splice`:
    *   Pros: It creates a new array, which can be useful if you want to preserve the original array.
    *   Cons: It's slower than other methods.
*   `Spread`:
    *   Pros: It uses a modern JavaScript feature (spread operator) and is generally faster than `splice`.
    *   Cons: Not all browsers support the spread operator, so this method might not work in older versions of Chrome or Safari.
*   `Unshift`:
    *   Pros: It's the fastest method because it only modifies the original array.
    *   Cons: If you want to preserve the original array, you'll need to create a new one.

**Other Considerations:**

If you need to insert an element at any position in the array, not just at the beginning, `splice` is still the best option. However, if performance is critical and you're sure that insertion will only happen at the beginning, `unshift` might be a better choice.

The spread operator was introduced in ECMAScript 2015 (ES6) and has since become a standard feature in modern browsers. While it's generally faster than `splice`, its support can vary across older browser versions.

**Library:**

None. This test case doesn't rely on any external libraries.

**Special JS Feature/Syntax:**

The spread operator (`...`) is the only special JavaScript feature used in this benchmark. It was introduced in ECMAScript 2015 (ES6) and allows you to create new arrays by spreading elements from an existing array.

In summary, `unshift` is generally the fastest approach for inserting an element at the beginning of an array, while `spread` offers a modern alternative that's faster than `splice`.

Related benchmarks:

Using Splice vs Spread vs Unshift to insert at beginning of array (version: 0)

Comparing performance of: Splice vs Spread vs Unshift

Created: 2 years ago by: Guest

Jump to the latest result

Splice

Spread

Unshift

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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