Benchmark: js splice v toSpliced improved

Script Preparation code:

function randomArray(e) {    
    e = e || 32;
    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
    a = t.length,
    n = [];
    for (i = 0; i < e; i++) n.push(t.charAt(Math.floor(Math.random() * a)));
    return n
}
var arr1 = randomArray(100)
var arr2 = randomArray(10000)
var arr3 = randomArray(1000000)

Tests:

splice-1
var result1 = arr1.splice(Math.floor(arr1.length / 2), 1, "i")
splice-2
var result1 = arr2.splice(Math.floor(arr2.length / 2), 1, "i")
splice-3
var result1 = arr3.splice(Math.floor(arr3.length / 2), 1, "i")
toSpliced-1
var result1 = arr1.toSpliced(Math.floor(arr1.length / 2), 1, "i")
toSpliced-2
var result1 = arr2.toSpliced(Math.floor(arr2.length / 2), 1, "i")
toSpliced-3
var result1 = arr3.toSpliced(Math.floor(arr3.length / 2), 1, "i")
splice-3 add items
var result1 = arr3.splice(Math.floor(arr3.length / 2), 1, "i", "2")
splice-3 remove
var result1 = arr3.splice(Math.floor(arr3.length / 2), 1)
toSpliced-3 add
var result1 = arr3.toSpliced(Math.floor(arr3.length / 2), 1, "i", "d")
toSpliced-3 remove
var result1 = arr3.toSpliced(Math.floor(arr3.length / 2), 1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
splice-1
splice-2
splice-3
toSpliced-1
toSpliced-2
toSpliced-3
splice-3 add items
splice-3 remove
toSpliced-3 add
toSpliced-3 remove

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
splice-1	3758490.8 Ops/sec
splice-2	3618269.8 Ops/sec
splice-3	3762439.5 Ops/sec
toSpliced-1	3089284.2 Ops/sec
toSpliced-2	194754.6 Ops/sec
toSpliced-3	448.6 Ops/sec
splice-3 add items	1251.2 Ops/sec
splice-3 remove	1758.3 Ops/sec
toSpliced-3 add	460.7 Ops/sec
toSpliced-3 remove	453.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing the performance of two methods: `splice` and `toSpliced`. Both methods are used to remove or add elements from an array.

*   The `splice` method modifies the original array by removing or adding elements at a specified index.
*   The `toSpliced` method creates a new array with the modified elements, leaving the original array unchanged.

**Options compared**

The benchmark is comparing different variations of these two methods:

1.  `arr.splice(Math.floor(arr.length / 2), 1, "i")`: removes the middle element from the array and adds an element at that index.
2.  `arr.toSpliced(Math.floor(arr.length / 2), 1, "i")`: creates a new array with the modified elements, leaving the original array unchanged.
3.  `arr.splice(Math.floor(arr.length / 2), 1)`: removes the middle element from the array without adding anything.
4.  `arr.toSpliced(Math.floor(arr.length / 2), 1)`: creates a new array with the modified elements, leaving the original array unchanged (without adding an element).
5.  `arr.splice(0, 1)` and `arr.splice(arr.length, 1)`: removes elements from both ends of the array.

**Performance results**

The benchmark provides execution times for each test case, indicating that:

*   Removing the middle element using `splice` is generally faster than creating a new array using `toSpliced`.
*   Adding an element to the middle of the array using `splice` is slower than creating a new array with only the added element.
*   Removing elements from both ends of the array (`arr.splice(0, 1)` and `arr.splice(arr.length, 1)`) are faster than removing or adding a single element in the middle.

**Conclusion**

The results suggest that `splice` is generally faster for removing or modifying elements in an array, while `toSpliced` is more efficient when creating a new array with modified elements. The choice of method depends on the specific use case and performance requirements.

Related benchmarks:

js splice v toSpliced improved (version: 0)

show splice v toSpliced performance

Comparing performance of: splice-1 vs splice-2 vs splice-3 vs toSpliced-1 vs toSpliced-2 vs toSpliced-3 vs splice-3 add items vs splice-3 remove vs toSpliced-3 add vs toSpliced-3 remove

Created: one year ago by: Guest

Jump to the latest result

splice-1

splice-2

splice-3

toSpliced-1

toSpliced-2

toSpliced-3

splice-3 add items

splice-3 remove

toSpliced-3 add

toSpliced-3 remove

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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