Benchmark: FindIndex + splice vs filter (fixed, slice array before splicing)

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:

FindIndex + splice
var index = arr.indexOf(foo); var copy = arr.slice(); copy.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
FindIndex + splice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
FindIndex + splice	178972.3 Ops/sec
filter	782.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The test compares two approaches for removing an element from an array: using `indexOf` with `splice`, and using `filter`.

**Script Preparation Code**

Before running the benchmarks, the script prepares an array of 15,000 elements, where each element has an `id` property that is initially set to 0. The code then maps over the array to update the `id` property of each element to its original index in the array.

The script also generates a random number `foo` between 0 and 14,999.

**Options Compared**

There are two approaches being compared:

1. **FindIndex + splice**: This approach uses `indexOf` to find the position of `foo` in the array, then uses `splice` to remove the element at that index.
2. **filter**: This approach uses the `filter` method to create a new array with all elements except for `foo`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **FindIndex + splice**:
	+ Pros: Can be efficient if the element is not found, as it only scans the array up to that point.
	+ Cons: Requires finding the index of the element using `indexOf`, which can be slow for large arrays. Also, `splice` modifies the original array.
* **filter**:
	+ Pros: Creates a new array without modifying the original array, making it more memory-efficient. Can also be faster if the element is not found.
	+ Cons: May have performance overhead due to creating a new array, especially for large arrays.

**Library and Special JS Features**

There are no libraries used in this benchmark, as both approaches rely on built-in JavaScript methods (`indexOf`, `splice`, and `filter`).

**Other Considerations**

* Both approaches assume that the element being removed is not already present in the array (i.e., `foo` is unique).
* If the array is very large, the performance difference between these two approaches may be negligible.
* In general, using `filter` can be a safer choice when removing elements from an array, as it avoids modifying the original array and creates a new one instead.

**Alternatives**

Other alternatives for removing elements from an array include:

* Using `map` to create a new array with the element removed: `arr.map((el, idx) => el.id === foo ? undefined : el);`
* Using `forEach` to iterate over the array and remove elements individually: `arr.forEach((el, idx) => { if (el.id === foo) arr.splice(idx, 1); });`
* Using a custom function or library for removing elements from an array (e.g., for optimized performance in specific use cases).

Keep in mind that these alternatives may have different trade-offs in terms of memory usage, performance, and code readability.

Related benchmarks:

FindIndex + splice vs filter (fixed, slice array before splicing) (version: 0)

Comparing performance of: FindIndex + splice vs filter

Created: 2 years ago by: Guest

Jump to the latest result

FindIndex + splice

filter

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):