Benchmark: 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.slice(0, 0, 99);
Spread
var newArray = [99, ...array];
Unshift
var newArray = array.unshift(99);

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Splice

29.1M/s

Spread

3.3M/s

Unshift

30K/s

Fastest: Splice (983.9x faster)

View exact numbers

✓ Splice: 29,071,446 ops/sec
• Spread: 3,305,079 ops/sec
• Unshift: 29,546 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 11 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Linux

View result in a separate tab

Splice

17.5M/s

Spread

696K/s

Unshift

443K/s

View exact numbers

Test name	Executions per second
✓ Splice	17,542,592 Ops/sec
Spread	695,653 Ops/sec
Unshift	442,666 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, compared, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for inserting an element at the beginning of an array:

1. `Splice`
2. `Spread` (using the spread operator `...`)
3. `Unshift`

These methods are used to insert a new element at the specified position in an array.

**Options Compared**

The benchmark compares the performance of these three approaches on an array of 100 elements. The performance metrics measured include the number of executions per second.

Pros and Cons:

* **Splice**: This method modifies the original array by removing and inserting elements at the specified position. It's a simple and straightforward approach but can be slower due to the overhead of modifying the array.
* **Spread**: This method creates a new array by spreading the existing array, then adds the new element at the beginning. It's more efficient than `Splice` since it doesn't modify the original array.
* **Unshift**: This method creates a new array with the new element added at the beginning and assigns it back to the original variable. It's similar to `Spread`, but it modifies the original array.

**Library Used**

In this benchmark, no external library is used. The operations are performed using built-in JavaScript methods and operators.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's considered standard by most modern JavaScript implementations.

**Other Considerations**

When writing benchmarks like this, it's essential to consider factors that might affect performance:

* Array size: The larger the array, the more significant the impact on performance.
* System resources: The benchmark should be run on a system with sufficient resources (e.g., CPU, RAM) to ensure fair results.
* Browser and environment variability: Running the benchmark across different browsers and environments helps identify platform-specific issues.

**Alternatives**

If you wanted to test similar operations or explore alternative methods, consider the following:

1. **Array.prototype.push()**: This method adds an element to the end of the array. You could compare its performance with `Unshift`.
2. **Array.from() + Array.prototype.concat()**: This approach creates a new array from an iterable and then concatenates it with another array. It's similar to `Spread` but might have different performance characteristics.
3. **Native Web Workers or worker threads**: If you're interested in parallelizing computations, consider using web workers or worker threads to take advantage of multi-core processors.

Keep in mind that each alternative will have its own set of considerations and potential biases, so it's essential to carefully evaluate the results and test methodology before drawing conclusions.

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

Comparing performance of: `Splice vs Spread vs Unshift`

Created: 6 years ago by: Guest

Go to the latest result

Splice

Spread

Unshift

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: Splice vs Spread vs Unshift

Created: 6 years ago by: Guest

Go to the latest result

Splice

Spread

Unshift

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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: `Splice vs Spread vs Unshift`