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

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: 8 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

Test name	Executions per second
Splice	11582.0 Ops/sec
Spread	478.8 Ops/sec
Unshift	478503.5 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.

Related benchmarks:

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

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