Benchmark: Remove an item from array; indexOf + splice vs filter

Script Preparation code:

var arr = [];
for (var i = 0; i < 10000; i++) {
  arr.push(Math.floor(Math.random() * 1000));
}
var itemToRemove = arr[Math.floor(Math.random() * 10000)]

Tests:

indexOf + splice
var result = arr.splice(arr.indexOf(itemToRemove), 1)
filter
var result = arr.filter(el => el !== itemToRemove)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
indexOf + splice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
indexOf + splice	36678748.0 Ops/sec
filter	318682560.0 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.

**Benchmark Definition**

The benchmark is designed to compare two approaches for removing an item from an array in JavaScript:

1. **`indexOf + splice`**: This approach uses `Array.prototype.indexOf()` to find the index of the item to be removed, and then uses `Array.prototype.splice()` to remove the item.
2. **`filter`**: This approach uses a callback function (`el => el !== itemToRemove`) inside `Array.prototype.filter()` to create a new array with all elements that do not match the item to be removed.

**Options Compared**

The two options are being compared in terms of:

* Execution speed: How fast each method is when removing an item from the array.
* Number of executions per second: This measures how many times each method can execute within a given time frame (in this case, 1 second).

**Pros and Cons of Each Approach**

**`indexOf + splice`**

Pros:

* Well-established and widely supported API
* Can be more efficient for large arrays since it only scans the array once to find the index

Cons:

* Requires two operations: finding the index and removing the item. This can lead to slower execution times compared to a single operation.
* May not work as expected if the array is very large or if the item to be removed is at the end of the array.

**`filter`**

Pros:

* A single operation that creates a new array with the desired elements
* Can be more efficient for small arrays since it only requires a single pass through the array

Cons:

* May not work as expected if the array contains many duplicate elements, which can lead to unnecessary computations.
* Less widely supported than `indexOf + splice`, although still well-supported.

**Library and Special JS Feature**

There is no specific library mentioned in the benchmark definition. However, `Array.prototype.filter()` uses a callback function, which is a feature of modern JavaScript that allows you to execute code based on certain conditions. This is a relatively recent addition to the language (introduced in ECMAScript 2015) and is widely supported across most browsers.

**Other Alternatives**

If you're interested in exploring alternative approaches for removing an item from an array, here are a few:

* Using `Array.prototype.reduce()` to create a new array with the desired elements
* Using a traditional loop and indexing array elements directly
* Using a library like Lodash's `difference()` function

Keep in mind that each of these alternatives may have their own trade-offs in terms of execution speed, memory usage, and code readability.

Related benchmarks:

Remove an item from array; indexOf + splice vs filter (version: 0)

Comparing performance of: indexOf + splice vs filter

Created: 5 years ago by: Guest

Jump to the latest result

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