Benchmark: splice vs copyWithin

Script Preparation code:

var colors = ["red", "blue"];
var index = 1;
var value = "white";

Tests:

splice()
colors.splice(index, 0, "white"); colors.splice(index, 1)
copyWithin()
colors.length++; colors.copyWithin(index + 1, index); colors[index] = value; colors.splice(index, 1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
splice()
copyWithin()

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
splice()	1413995.0 Ops/sec
copyWithin()	661694.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and other considerations.

**Benchmark Overview**

The benchmark compares two ways to modify an array in JavaScript: `splice()` and `copyWithin()`. The test case creates an array of colors, then modifies it using each method. We'll dive into the details below.

**Script Preparation Code**

The script preparation code is:
```javascript
var colors = ["red", "blue"];
var index = 1;
var value = "white";
```
This code sets up a simple color array and defines variables `index` and `value`.

**Html Preparation Code**

There is no HTML preparation code provided.

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. **splice()**
```javascript
colors.splice(index, 0, "white");
colors.splice(index, 1);
```
This code uses the first element of the `index`-th position in the array to insert a new value ("white") and then removes one element from that position.

2. **copyWithin()**
```javascript
colors.length++;
colors.copyWithin(index + 1, index);
colors[index] = value;
```
This code increments the length of the array by 1, uses `copyWithin()` to copy elements from the current `index`-th position onwards to the next position, and then assigns the value at the original `index` position.

**Comparison**

The benchmark tests which method is faster for each test case: `splice() vs copyWithin()`.

**Options Compared**

Two options are compared:

1. **`splice(index, 0, "white")`**: This option modifies the array by inserting a new element at the specified position (`index`) and then removing one element from that position.
2. **`copyWithin(index + 1, index)`**: This option uses `copyWithin()` to copy elements from the current position onwards (starting from `index`) to the next position.

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

* **`splice(index, 0, "white")`**:
	+ Pros: Can be used to insert or remove multiple elements at once.
	+ Cons: May be slower due to the array's internal implementation details and the need to shift elements after insertion.
* **`copyWithin(index + 1, index)`**:
	+ Pros: More efficient than `splice()` because it only copies a subset of elements and avoids shifting the entire array.
	+ Cons: Requires a specific format for the `index` parameter (inclusive start) and may not be as intuitive to use.

**Library Used**

In this benchmark, the `Array.prototype.splice()` method is used. This method modifies the original array in place.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Considerations**

* **Browser Support**: The benchmark uses Chrome 110 as the testing browser. Other browsers may have different performance characteristics for these methods.
* **Device Platform**: The test is run on a desktop device, which may affect performance due to differences in hardware and operating system.

**Alternatives**

If you're looking for alternatives to `splice()` or `copyWithin()`, consider the following:

1. **`concat()`**: For inserting elements at the end of an array.
2. **`slice()`**: For extracting a subset of elements from an array.
3. **`map()`**: For creating a new array with transformed elements.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to `splice()` and `copyWithin()`.

Related benchmarks:

splice vs copyWithin (version: 0)

Comparing performance of: splice() vs copyWithin()

Created: 4 years ago by: Guest

Jump to the latest result

splice()

copyWithin()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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