Benchmark: Array filter vs indexOf - search, add and remove an element

Script Preparation code:

var inputSet = [];
for (var i = 0; i < 100000; i++) {
  inputSet.push(Math.floor(Math.random() * 100));
}

Tests:

array.filter
var tempResult = []; inputSet.forEach(function(input) { var stripped = tempResult.filter(function(res) { return res !== input }); if (stripped.length < tempResult.length) { tempResult = stripped; } else { tempResult = tempResult.concat([input]); } });
array.indexOf
var tempResult = []; inputSet.forEach(function(input) { var index = tempResult.indexOf(input); if (index !== -1) { tempResult = tempResult.slice(0, index).concat(tempResult.slice(index + 1)); } else { tempResult = tempResult.concat([input]); } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.filter
array.indexOf

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark compares the performance of two approaches for removing elements from an array: `Array.prototype.filter()` and `Array.prototype.indexOf()`. The test case adds new elements to the array, searches for existing elements, and then removes them.

**Approaches Compared**

1. **`Array.prototype.filter()`**: This approach creates a new array with only the elements that do not match the specified condition (in this case, an element is present in the `inputSet`).
2. **`Array.prototype.indexOf()`**: This approach finds the index of the first occurrence of the specified element in the array. If the element is found, it uses `slice()` to create a new array with all elements before and after the found element removed.

**Pros and Cons**

*   **`Array.prototype.filter()`**:
    *   Pros:
        *   Can be more efficient if the filtering condition is complex, as it avoids iterating over the entire array.
        *   Can be parallelized more easily using Web Workers or other concurrency techniques.
    *   Cons:
        *   Creates a new array, which can lead to increased memory usage and slower performance for large arrays.
*   **`Array.prototype.indexOf()`**:
    *   Pros:
        *   More efficient than `filter()` when only removing one element, as it avoids creating a new array.
        *   Can be faster in some cases because it uses a binary search algorithm under the hood.
    *   Cons:
        *   May not be suitable for large arrays or complex filtering conditions.

**Library Usage**

In this benchmark, there is no explicit library usage. However, if you were to use additional libraries or frameworks, here are some possibilities:

*   **Lodash**: You could use Lodash's `filter()` and `indexOf()` functions from the `_` object.
*   **Moment.js**: If you need to work with dates or times, Moment.js might be used for date-related filtering.

**Special JS Features/Syntax**

In this benchmark, there are no special JavaScript features or syntax being tested. However, if we were to expand on this benchmark:

*   **Async/await**: You could test the performance of `async/await`-based approaches versus synchronous ones.
*   **Generators**: You could compare the efficiency of generator-based loops against traditional for loops.

**Other Alternatives**

In addition to `filter()` and `indexOf()`, other approaches you might consider testing include:

1.  **Splice()**: Removing elements from an array by index using `splice()`.
2.  **Array.prototype.map()` with a callback function: This approach could be more suitable for situations where the filtering condition is complex or requires multiple operations.
3.  **Using `Set` data structure:** If you need to remove duplicates, using a Set data structure might provide better performance.

Keep in mind that these alternatives may not be directly comparable to `filter()` and `indexOf()`, depending on your specific use case and requirements.

Latest run results:

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

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

Browser/OS: Opera 89 on Windows

View result in a separate tab

Test name	Executions per second
array.filter	23.6 Ops/sec
array.indexOf	16.4 Ops/sec

Related benchmarks:

Array filter vs indexOf - search, add and remove an element (version: 0)

Compare filter and indexOf in adding new and removing existing elements from the array

Comparing performance of: array.filter vs array.indexOf

Created: 6 years ago by: Registered User

Jump to the latest result

array.filter

array.indexOf

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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