Benchmark: slice + spread vs slice + concat vs slice + mutation vs spread + mutation vs splice

Script Preparation code:

var indices = [1, 100, 1000, 5000, 50000, 99000]
var list = [];
for (let i = 0; i < 1000 * 1000; i++) {
  list.push(i);
}

Tests:

slice + spread
let list2 = list; for (let i = 0; i < indices.length; i++) { list2 = [...list2.slice(0, i), 777, ...list2.slice(i + 1, Infinity)] }
slice + concat
let list2 = list; for (let i = 0; i < indices.length; i++) { list2 = [].concat(list2.slice(0, i), [777], list2.slice(i + 1, Infinity)) }
slice + mutation
let list2 = list; for (let i = 0; i < indices.length; i++) { list2 = list2.slice() list2[i] = 777; }
spread + mutation
let list2 = list; for (let i = 0; i < indices.length; i++) { list2 = [...list2] list2[i] = 777; }
splice
let list2 = list; for (let i = 0; i < indices.length; i++) { list2.splice(i, 1, 777) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice + spread
slice + concat
slice + mutation
spread + mutation
splice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
slice + spread	23.5 Ops/sec
slice + concat	91.6 Ops/sec
slice + mutation	222.2 Ops/sec
spread + mutation	8.2 Ops/sec
splice	2749453.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll dive into explaining the benchmark and its various test cases.

**What is being tested?**

MeasureThat.net is testing the performance of four different approaches for modifying an array in JavaScript:

1.  Slicing: Creating a new array that includes elements up to a specified index (`list2.slice(0, i)`), followed by concatenating new elements (`...list2.slice(i + 1, Infinity)`) or simply replacing an element at a specific index (`list2[i] = 777;`).
2.  Concatenation: Using the `concat()` method to concatenate new elements to the end of the array.
3.  Splicing: Using the `splice()` method to replace an element at a specified index.

**Options compared**

Each test case is designed to measure the performance difference between these four approaches:

*   Slicing (`list2.slice(0, i)`)
*   Concatenation (`...list2.slice(i + 1, Infinity)` or `[777]` followed by `list2.concat()`)
*   Mutation (`list2[i] = 777;`)
*   Splicing (`list2.splice(i, 1, 777)`)

**Pros and Cons of each approach:**

1.  **Slicing**:
    *   Pros:
        *   Creates a new array with the desired elements, avoiding modifying the original array.
        *   More predictable performance since it always involves creating a new array.
    *   Cons:
        *   Can be slower than other methods for large arrays due to the overhead of creating new arrays.
2.  **Concatenation**:
    *   Pros:
        *   Fast and efficient for small arrays, as it only involves adding elements to the end.
    *   Cons:
        *   May lead to performance issues with very large arrays since it requires creating a new array each time.
3.  **Mutation**:
    *   Pros:
        *   Simple and fast, as it only involves modifying the original array.
    *   Cons:
        *   May not be suitable for all scenarios, especially when working with large or complex data structures.
4.  **Splicing**:
    *   Pros:
        *   Fast and efficient for replacing elements at specific indices.
    *   Cons:
        *   May lead to performance issues if the array is very large.

**Library usage**

There is no explicit library mentioned in the provided JSON, so it appears that these test cases are designed to measure the inherent performance differences between the four approaches without relying on any external libraries or frameworks.

**Special JavaScript feature: ES6 spread operator**

The `...` syntax used in some of the benchmark definitions is a part of the ECMAScript 2015 (ES6) standard, which allows for spreading array elements into a new array. This feature was not present in earlier versions of JavaScript and is supported by most modern browsers.

**Other alternatives**

If these four approaches are not sufficient or if you need more options, other methods to modify arrays in JavaScript include:

*   Using `Array.prototype.reduce()` to replace elements at specific indices.
*   Utilizing `set()` method with a new array of desired values to overwrite existing data.
*   Employing custom loops and indexing to manually manipulate the array.

These alternatives might offer different trade-offs in terms of performance, readability, or complexity, so it's essential to evaluate each approach based on your specific use case and requirements.

Related benchmarks:

slice + spread vs slice + concat vs slice + mutation vs spread + mutation vs splice (version: 0)

Comparing performance of: slice + spread vs slice + concat vs slice + mutation vs spread + mutation vs splice

Created: one year ago by: Guest

Jump to the latest result

slice + spread

slice + concat

slice + mutation

spread + mutation

splice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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