Benchmark: Filter vs indexOf + spread+ splice

Script Preparation code:

var arr = new Array(15000);
arr.fill({ id: 0 });
arr = arr.map((el, idx) => el.id = idx);
var foo = Math.floor(Math.random() * 15000);

Tests:

splice
var index = arr.indexOf(foo); var newArr = [...arr].splice(index, 1);
filter
var index = arr.filter(el => el !== foo)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
splice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
splice	3339.7 Ops/sec
filter	1152.7 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 definition and explanation.

**What is tested?**

The test measures the performance difference between using `splice()` with an array slice (`newArr = [...arr].splice(index, 1)`) and using `filter()` to create a new array (`var index = arr.filter(el => el !== foo)`). The input data consists of an array `arr` filled with objects containing an `id` property, where each object's `id` is set to its original index in the array.

**Options compared**

There are two main options being compared:

1. **Splice**: Using the `splice()` method to remove a single element from the end of the array. This approach modifies the original array.
2. **Filter**: Using the `filter()` method to create a new array with elements that do not match a specified condition (in this case, an object's value equal to the input `foo`).

**Pros and Cons**

**Splice:**

Pros:

* Modifies the original array in place, which can be beneficial for performance if the modified array is used later.
* Does not require creating a new array.

Cons:

* Can be slower than filter due to its overhead of modifying the array in place.
* Can cause issues with array indices if the removed element is accessed after removal.

**Filter:**

Pros:

* Creates a new array without modifying the original, which can be beneficial for preserving data integrity.
* Can be faster than splice because it avoids the overhead of modifying the array in place.

Cons:

* Requires creating a new array, which can be slower and more memory-intensive than splice.
* May have performance issues if the new array is large or used extensively.

**Other considerations**

The test also uses `Math.random()` to generate a random index (`foo`) for each iteration. This helps distribute the results between the two options across multiple runs.

**Library/Language feature usage**

None of the provided code snippets use any JavaScript libraries, but they do utilize the following language features:

* Arrow functions: `arr.map((el, idx) => el.id = idx)`
* Spread syntax (`[...arr]`)
* Filter method

These features are part of modern JavaScript and have been widely adopted in recent versions (ECMAScript 2015+).

**Alternatives**

Other alternatives for this benchmark could include:

1. Using `findIndex()` instead of `filter()`, which returns the index of the first matching element instead of an array.
2. Using a different method to remove elements, such as using `map()` and then concatenating the results with `[...arr]`.
3. Adding more elements to the input array to increase the size of the dataset.

However, these alternatives would likely require significant changes to the benchmark definition and test setup.

Related benchmarks:

Filter vs indexOf + spread+ splice (version: 0)

Comparing performance of: splice vs filter

Created: 2 years ago by: Guest

Jump to the latest result

splice

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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