Benchmark: Array.splice + indexOf vs Array.filter

HTML Preparation code:

<script>
  const i1 = {};
  const i2 = {};
  const i3 = {};
  const i4 = {};
  const i5 = {};
  const i6 = {};
  const i7 = {};
  const i8 = {};
  const i9 = {};
  const i10 = {};
  const array = [i1, i2, i3, i4, i5, i6, i7, i8, i9, i10];
</script>

Script Preparation code:

function spliceIt(array, element){
  const index = array.indexOf(element);
  array.splice(index, 1);
}

function filterIt(array, element){
  array = array.filter(el => el !== element);
}

Tests:

Splice It
spliceIt(array, i5);
filter It
filterIt(array, i5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice It
filter It

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Linux

View result in a separate tab

Test name	Executions per second
Splice It	25714312.0 Ops/sec
filter It	59279696.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

In this benchmark, we are comparing two approaches for removing an element from an array in JavaScript: using `Array.splice()` combined with `indexOf()` versus using `Array.filter()`. Let’s break down the methods being tested, their pros and cons, and provide additional context around the libraries and techniques utilized.

### 1. Approaches Being Tested

#### a. **Using `Array.splice()` with `indexOf()`**
```javascript
function spliceIt(array, element) {
  const index = array.indexOf(element);
  array.splice(index, 1);
}
```
- **Description**: This approach first finds the index of the specified `element` in the `array` via `indexOf()`. It then removes the element at that index using `splice()`, which modifies the original array.
  
- **Pros**:
  - Directly modifies the original array, potentially saving space.
  - Simple and straightforward for users who need to customize the array in place.
  
- **Cons**:
  - `indexOf()` must iterate through the array to find the index, which adds overhead, especially for large arrays.
  - If the element is not found, `indexOf()` returns -1, and calling `splice()` with -1 will still modify the array (by removing the last element), which may lead to unintended behavior.
  
#### b. **Using `Array.filter()`**
```javascript
function filterIt(array, element) {
  array = array.filter(el => el !== element);
}
```
- **Description**: This method creates a new array that excludes the specified `element` by applying a filtering function. The original array remains unmodified unless reassigned.
  
- **Pros**:
  - More functional in nature, as it does not mutate the original array, which can lead to safer code practices.
  - Handles cases where the element may not be found more gracefully, simply retaining the original array if there's nothing to filter out.
  
- **Cons**:
  - Creates a new array, which might increase memory usage and execution time, particularly for large datasets.
  - Less efficient than splice for small arrays if in-place modification is intended.

### 2. Benchmark Results
The benchmark results show that the filter method is significantly faster than the splice method on the test machine:
- **`filterIt`:** 59,279,696 executions per second
- **`spliceIt`:** 25,714,312 executions per second

### 3. Library and Technique Considerations
While these particular functions do not utilize external libraries, they do rely on native JavaScript array methods (`splice`, `indexOf`, and `filter`). These methods are intrinsic to JavaScript, meaning they are built directly into the language and do not require any additional libraries, making them widely accessible.

### 4. Other Alternatives
The benchmark primarily covers two common methods, but there are alternatives for removing elements from arrays in JavaScript:

- **Using a Loop**: A traditional `for` loop could be used to manually construct a new array without the unwanted elements.
- **Using Immutable Libraries**: Libraries like `Immutable.js` or `Lodash` can provide utility functions for achieving similar outcomes in a more controlled and optimized manner, especially in functional programming contexts.
- **Set Data Structures**: In scenarios involving unique elements, employing a `Set` can provide efficient membership checks and deletions.

This benchmark sheds light on performance trade-offs prevalent in JavaScript array manipulation techniques. Software engineers should choose the method based on the specific needs—such as performance requirements, memory efficiency, and whether immutability is desired when dealing with arrays.

Related benchmarks:

Array.splice + indexOf vs Array.filter (version: 1)

Test a speed difference between these 2 approaches

Comparing performance of: Splice It vs filter It

Created: one year ago by: Guest

Jump to the latest result

Splice It

filter It

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):