Benchmark: Remove array items: FindIndex + Splice vs Filter

Script Preparation code:

function createObjectsArray(size) {
  return Array.from({ length: size }, (_, i) => ({ id: i + 1 }));
}

function generateRandomArray(size) {
  const arr = Array.from({ length: size }, (_, i) => i + 1);
  return arr.sort(() => Math.random() - 0.5);
}

function removeWithFilter(array, ids) {
  ids.forEach((id) => {
    array = array.filter((item) => item.id !== id);
  });
}

function removeWithFindIndexAndSplice(array, ids) {
  ids.forEach((id) => {
    const index = array.findIndex((item) => item.id === id);
    if (index !== -1) array.splice(index, 1);
  });
}

var testSize1 = 10;
var testSize2 = 100;
var testSize3 = 1000;
var testSize4 = 10000;

var randomIds1 = generateRandomArray(testSize1);
var randomIds2 = generateRandomArray(testSize2);
var randomIds3 = generateRandomArray(testSize3);
var randomIds4 = generateRandomArray(testSize4);

var func1Array1 = createObjectsArray(testSize1);
var func1Array2 = createObjectsArray(testSize2);
var func1Array3 = createObjectsArray(testSize3);
var func1Array4 = createObjectsArray(testSize4);

var func2Array1 = createObjectsArray(testSize1);
var func2Array2 = createObjectsArray(testSize2);
var func2Array3 = createObjectsArray(testSize3);
var func2Array4 = createObjectsArray(testSize4);

Tests:

Filter 10
removeWithFilter(func1Array1, randomIds1)
Filter 100
removeWithFilter(func1Array2, randomIds2)
Filter 1000
removeWithFilter(func1Array3, randomIds3)
Filter 10000
removeWithFilter(func1Array4, randomIds4)
FindIndex + Splice 10
removeWithFindIndexAndSplice(func2Array1, randomIds1)
FindIndex + Splice 100
removeWithFindIndexAndSplice(func2Array2, randomIds2)
FindIndex + Splice 1000
removeWithFindIndexAndSplice(func2Array3, randomIds3)
FindIndex + Splice 10000
removeWithFindIndexAndSplice(func2Array4, randomIds4)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Filter 10
Filter 100
Filter 1000
Filter 10000
FindIndex + Splice 10
FindIndex + Splice 100
FindIndex + Splice 1000
FindIndex + Splice 10000

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
Filter 10	4546297.0 Ops/sec
Filter 100	88724.8 Ops/sec
Filter 1000	254.1 Ops/sec
Filter 10000	2.7 Ops/sec
FindIndex + Splice 10	9992292.0 Ops/sec
FindIndex + Splice 100	5037217.0 Ops/sec
FindIndex + Splice 1000	835766.9 Ops/sec
FindIndex + Splice 10000	53878.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, hosted on MeasureThat.net, compares two methods for removing items from an array: `filter()` and using `findIndex()` followed by `splice()`. The test cases vary in the size of the input arrays (10, 100, 1000, and 10000 elements) to evaluate the performance impact of each approach.

**Methods Compared**

1. **Filter()**: This method uses a callback function to iterate through the array and remove items that match a specified condition.
2. **FindIndex() + Splice()**: This method uses `findIndex()` to find the index of the first element matching a certain condition, then removes that element using `splice()`.

**Pros and Cons**

### Filter()

Pros:

* Simple and concise code
* Easy to implement for small arrays
* Fast for small arrays ( O(n) time complexity)

Cons:

* Time complexity increases linearly with array size (O(n))
* May not perform well for very large arrays due to the overhead of iterating through all elements

### FindIndex() + Splice()

Pros:

* Can be more efficient than `filter()` for large arrays, as it only requires finding the index once
* Can be faster than `filter()` for very large arrays, with a time complexity of O(n) but lower constant factors

Cons:

* More complex code compared to `filter()`
* May have additional overhead due to the use of `splice()`, which can reallocate memory and cause slower performance

**Performance Comparison**

The benchmark results show that the `FindIndex() + Splice()` approach outperforms `filter()` for most test cases, especially for larger array sizes. However, the difference in performance is relatively small for smaller arrays.

**Conclusion**

Both methods have their trade-offs, but the `FindIndex() + Splice()` approach may be preferred for larger arrays or when performance is critical. For smaller arrays or development purposes, `filter()` might be a simpler and more straightforward choice. Ultimately, the choice between these two methods depends on the specific use case and requirements of your application.

Related benchmarks:

Remove array items: FindIndex + Splice vs Filter (version: 0)

Compare array item removal methods.

Comparing performance of: Filter 10 vs Filter 100 vs Filter 1000 vs Filter 10000 vs FindIndex + Splice 10 vs FindIndex + Splice 100 vs FindIndex + Splice 1000 vs FindIndex + Splice 10000

Created: one year ago by: Guest

Jump to the latest result

Filter 10

Filter 100

Filter 1000

Filter 10000

FindIndex + Splice 10

FindIndex + Splice 100

FindIndex + Splice 1000

FindIndex + Splice 10000

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