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

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
arr.splice(arr.indexOf(itemToRemove), 1)
filter
arr = 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: one month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
indexOf + splice	2922316.8 Ops/sec
filter	3671965.2 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 analyze what's being tested.

**What is being tested?**

The benchmark measures the performance of two approaches to remove an item from an array:

1. `arr.splice(arr.indexOf(itemToRemove), 1)`: This approach uses the `indexOf` method to find the index of the item to be removed, and then calls `splice` with that index and a length of 1.
2. `arr = arr.filter(el => el !== itemToRemove)`: This approach uses the `filter` method to create a new array with all elements that are not equal to `itemToRemove`.

**Options compared**

The benchmark is comparing these two approaches, which can be summarized as:

* Linear search vs. filtering
* Direct modification of the array vs. creating a new array

**Pros and cons of each approach:**

1. **Linear search (indexOf + splice)**:
	* Pros: Simple, efficient for small arrays.
	* Cons: Has to traverse the entire array to find the item, making it less efficient for large arrays.
	* Time complexity: O(n)
2. **Filtering (filter)**:
	* Pros: Efficient and scalable for large arrays, as it doesn't require traversing the entire array.
	* Cons: Creates a new array, which can be memory-intensive.
	* Time complexity: O(n)

**Library and purpose**

The `Array.prototype.filter` method is a built-in JavaScript method that creates a new array with all elements that pass the test implemented by the provided function.

**Special JS feature or syntax**

There are no special features or syntax used in this benchmark. The code only uses standard JavaScript constructs like arrays, loops, and conditional statements.

**Other alternatives**

Besides `indexOf + splice` and `filter`, other approaches to remove an item from an array could include:

* Using a data structure like a hash table or a set for faster lookups
* Implementing a custom search algorithm (e.g., binary search)
* Using a library like Lodash, which provides optimized implementations of these operations

It's worth noting that the choice of approach depends on the specific use case and performance requirements.

The benchmark is useful because it allows developers to compare the performance of different approaches in a controlled environment, which can help inform design decisions when working with large datasets.

Related benchmarks:

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

Comparing performance of: indexOf + splice vs filter

Created: 4 years ago by: Guest

Jump to the latest result

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