Benchmark: Slice & Splice vs ES6 Array Spread

Script Preparation code:

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

Tests:

Slice & Splice
var messages = array.slice().splice(38, 1);
ES6 Array Creation
var messages = [...array].splice(38, 1);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Slice & Splice
ES6 Array Creation

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Slice & Splice	10704300.0 Ops/sec
ES6 Array Creation	10654868.0 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of two different approaches to creating a new array that excludes one element from an existing array in JavaScript:

**1. `slice()` and `splice()`:**

* This method uses two built-in functions: 
    *  `slice()`: Creates a shallow copy of a portion of an array without modifying the original. 
    * `splice()`: Modifies the original array by removing elements at a specific index range.

The code snippet `array.slice().splice(38, 1)` first creates a copy of the `array` using `slice()` and then uses `splice()` to remove one element from that copy (at index 38).

**2. ES6 Array Spread Syntax:**

* This method leverages the concise syntax introduced in ECMAScript 6.  The spread operator (`...`) allows you to expand an array into its individual elements within a new array literal.

The code snippet `[...array].splice(38, 1)` first uses the spread operator to create a new array containing all the elements of the original `array`, and then modifies that new array using `splice()` to remove one element (at index 38).

**Pros & Cons:**

* **`slice()` & `splice()`**:
    * **Cons:** More verbose, potentially less readable. Requires understanding how both functions work together.
    * **Pros:** Works in older JavaScript versions that don't support ES6 syntax.

* **ES6 Array Spread Syntax**:
    * **Cons:**  Requires knowledge of ES6 features, may not be supported in all browsers. 
    * **Pros:** More concise and readable, potentially more efficient due to a single array operation.

**Other Considerations:**

* **`splice()` vs. `slice()`**: The choice between these two methods depends on whether you need to modify the original array or simply create a new one without changes.
* **Alternatives:** 
    *  For simpler cases, filtering can be used with `filter()` method:
        ```javascript
        const newArray = array.filter((val, i) => i !== 38);
        ```

**Test Results:**

In this specific benchmark, the ES6 Array Spread Syntax slightly outperforms the traditional `slice() & splice()` approach. This result is consistent with the generally expected performance advantage of using modern JavaScript features like spread syntax.

Related benchmarks:

Slice & Splice vs ES6 Array Spread (version: 2)

Comparing performance of: Slice & Splice vs ES6 Array Creation

Created: 6 years ago by: Registered User

Jump to the latest result

Slice & Splice

ES6 Array Creation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):