Benchmark: slice + spread vs slice + concat vs slice + mutation vs spread + mutation vs slice + 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 = list2.slice() 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.4 Ops/sec
slice + concat	94.8 Ops/sec
slice + mutation	236.5 Ops/sec
spread + mutation	8.4 Ops/sec
splice	227.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what each test case is testing, along with their pros and cons.

**Benchmark Overview**

The benchmark compares four different approaches to modify an array in JavaScript:

1. `slice + spread`
2. `slice + concat`
3. `slice + mutation` (directly modifying the slice)
4. `spread + mutation` (using the spread operator on a new array)

**Test Case 1: `slice + spread`**

This test case uses the spread operator (`...`) to create a new array by spreading elements from the original array.

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

Pros:

* Creates a new array with the desired elements.
* No direct modification of the original array.

Cons:

* Requires using the spread operator, which can be slower than other methods.
* Creates an additional array object.

**Test Case 2: `slice + concat`**

This test case uses the `concat()` method to concatenate arrays and add new elements.

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

Pros:

* Faster than using the spread operator.
* Does not create an additional array object.

Cons:

* Modifies the original array by concatenating new elements to it.
* Can lead to performance issues for large arrays.

**Test Case 3: `slice + mutation`**

This test case directly modifies the slice of the original array by assigning a new value to an element.

```javascript
let list2 = list;
for (let i = 0; i < indices.length; i++) {
  list2 = list2.slice();
  list2[i] = 777;
}
```

Pros:

* Fastest way to modify the original array.
* No additional memory allocation is required.

Cons:

* Modifies the original array, which can lead to unexpected behavior if the array is used elsewhere.
* Can be slower than using `concat()` or spread operators for large arrays due to the iteration and indexing operations.

**Test Case 4: `spread + mutation`**

This test case uses the spread operator on a new array and then modifies its elements.

```javascript
let list2 = list;
for (let i = 0; i < indices.length; i++) {
  list2 = [...list2];
  list2[i] = 777;
}
```

Pros:

* Creates a new array with the desired elements.
* Modifies the original array's reference, but not its contents.

Cons:

* Requires using the spread operator twice, which can be slower than other methods.
* Creates an additional array object.

**Library: `array.prototype.slice()`**

The `slice()` method returns a shallow copy of a portion of an array. It is used in several test cases to extract a subset of elements from the original array.

```javascript
list2 = list2.slice(0, i);
```

This method has a time complexity of O(n), where n is the length of the array.

**Other Considerations**

* The benchmark uses a large dataset with 1 million elements and various indices to test the performance of each approach.
* The `ExecutionsPerSecond` metric measures how many times each test case executes per second on different hardware configurations.
* The results show that `slice + mutation` is generally the fastest approach, followed by `slice + concat`, while `spread + mutation` and `slice + spread` are slower.

**Alternatives**

Other alternatives for modifying arrays in JavaScript include:

* Using `forEach()` or `map()` with callbacks to modify elements
* Using `reduce()` to combine elements into a new array
* Using libraries like Lodash to perform array operations

However, the chosen approach depends on the specific use case and performance requirements.

Related benchmarks:

slice + spread vs slice + concat vs slice + mutation vs spread + mutation vs slice + 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):