Benchmark: non-mutating array remove element: spread and slice vs slice and splice vs filter

Script Preparation code:

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

Tests:

spread
var output = [...array.slice(0, 38), ...array.slice(39)]
splice
var output = array.slice().splice(38, 1)
filter
var output = array.filter((el, i) => i !== 38)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
splice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a microbenchmark test created on the MeasureThat.net website. The benchmark compares three different approaches to remove an element from a non-mutating array in JavaScript:

1. Spreading and slicing (`spread`)
2. Slicing with `splice` (`splice`)
3. Filtering (`filter`)

**Benchmark Preparation Code**

The script preparation code is provided as:
```javascript
var array = Array.from({ length: 100 }).map((val, i) => i);
```
This code creates an array of 100 elements, where each element is the index of its position in the array.

**Individual Test Cases**

There are three test cases:

1. **Spread**: `var output = [...array.slice(0, 38), ...array.slice(39)]`
This approach uses the spread operator (`...`) to create a new array by concatenating two slices of the original array.
2. **Splice**: `var output = array.slice().splice(38, 1)`
This approach first creates a copy of the original array using `slice()`, and then removes an element at index 38 using `splice()`.
3. **Filter**: `var output = array.filter((el, i) => i !== 38)`
This approach uses the `filter()` method to create a new array containing only the elements that do not match the condition `(el, i) => i !== 38`, which excludes the element at index 38.

**Comparison and Considerations**

Here's a brief analysis of each approach:

1. **Spread**: This approach has an advantage in terms of conciseness and readability. However, it may incur additional overhead due to the creation of temporary arrays.
2. **Splice**: This approach is generally considered faster than spreading and slicing because it avoids creating new arrays. However, it modifies the original array, which might be undesirable if the array needs to remain unchanged.
3. **Filter**: This approach is likely to be the slowest due to its use of a functional programming style that creates a new array.

**Library Usage**

None of these approaches rely on any external libraries or dependencies.

**Special JavaScript Features/Syntax**

The benchmark uses modern JavaScript features such as:

* Spread operator (`...`)
* Array.prototype.slice()
* Arrow functions `(el, i) => i !== 38`
* Template literals (not explicitly used in this code snippet)

**Other Alternatives**

If you were to implement this benchmark using other approaches, some alternatives could include:

* Using `map()` instead of `filter()`: `var output = array.map((val, i) => val === 38 ? undefined : val)`
* Using a `for` loop instead of `slice()` or `splice()`: `var output = []; for (var i = 0; i < 100; i++) { if (i !== 38) output.push(i); }`
* Using `reduce()` instead of `filter()` or `map()`: `var output = array.reduce((acc, val, i) => acc.concat(val === 38 ? [] : [val]), [])`

Keep in mind that these alternatives might have different performance characteristics and may not be suitable for all use cases.

Related benchmarks:

non-mutating array remove element: spread and slice vs slice and splice vs filter (version: 0)

Comparing performance of: spread vs splice vs filter

Created: 7 years ago by: Guest

Jump to the latest result

spread

splice

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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