Benchmark: Splice vs Spread vs Unshift to insert at beginning of array (fixed from slice)

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);

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 39 runs

Unshift

16K/s

Splice

13K/s

Spread

137/s

Fastest: Unshift (116.6x faster)

View exact numbers

✓ Unshift: 16,019 ops/sec
• Splice: 12,889 ops/sec
• Spread: 137 ops/sec

Firefox 9 runs

Unshift

574K/s

Splice

6K/s

Spread

278/s

Fastest: Unshift (2067.4x faster)

View exact numbers

✓ Unshift: 574,254 ops/sec
• Splice: 6,474 ops/sec
• Spread: 278 ops/sec

Mobile Results:

Chrome 5 runs

Unshift

13K/s

Splice

10K/s

Spread

81/s

Fastest: Unshift (163.0x faster)

View exact numbers

✓ Unshift: 13,159 ops/sec
• Splice: 9,983 ops/sec
• Spread: 81 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

Unshift

479K/s

Splice

12K/s

Spread

479/s

View exact numbers

Test name	Executions per second
✓ Unshift	478,503 Ops/sec
Splice	11,582 Ops/sec
Spread	479 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.

**Benchmark Overview**

The provided JSON represents a benchmark test that compares three different approaches to insert an element at the beginning of an array: `Splice`, `Spread`, and `Unshift`. The test aims to determine which approach is the most efficient.

**Script Preparation Code**

The script preparation code creates a fixed-size array with 100 elements, seeded from an index `i` using the `Array.from()` method. This ensures that all benchmark tests start with the same initial array.

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

**Options Compared**

The three options compared are:

1. **Splice**: `array.splice(0, 0, 99);`
2. **Spread**: `[99, ...array];`
3. **Unshift**: `array.unshift(99);`

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

*   **Splice**:
    *   Pros: Efficient when dealing with large arrays or modifying elements in place.
    *   Cons: Creates an intermediate array, which can be inefficient for very large arrays. It also returns the removed element, which might not always be desirable.
*   **Spread**:
    *   Pros: Creates a new array without modifying the original, which is more predictable and efficient than `splice`. It's also concise and easy to read.
    *   Cons: Creates a new array, which can be memory-intensive for large arrays. It doesn't modify the original array in place.
*   **Unshift**:
    *   Pros: Modifies the original array in place, which is more efficient than creating a new array. It also preserves the existing elements of the array.
    *   Cons: Can be slower when dealing with very large arrays due to its mutability.

**Library and Special JS Features**

There are no specific libraries mentioned in this benchmark. However, it's worth noting that `Array.from()` is used to create an array from an iterable (in this case, the object `{ length: 100 }`). This method is supported in most modern browsers and Node.js versions.

**Other Considerations**

When running microbenchmarks like this one, it's essential to consider factors beyond just raw execution speed. These may include:

*   Cache performance
*   Garbage collection overhead
*   Browser engine-specific optimizations or limitations

**Alternative Approaches**

For more complex array operations, other approaches might be considered:

*   Using `concat()` instead of `Array.from()`
*   Utilizing `slice()` to create a shallow copy of the original array
*   Leveraging native WebAssembly (WASM) for high-performance array operations

However, these alternatives are typically less suitable for simple microbenchmarks like this one.

That's it! By analyzing this benchmark JSON, we've gained insight into how three different approaches compare in terms of execution speed.

Splice vs Spread vs Unshift to insert at beginning of array (fixed from slice) (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 53 community runs

Desktop Results:

Chrome 39 runs

Firefox 9 runs

Mobile 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 (fixed from slice) (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 53 community runs

Desktop Results:

Chrome 39 runs

Firefox 9 runs

Mobile 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`