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

Script Preparation code:

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

Tests:

array.filter
var tempResult = []; inputSet.forEach(function(input) { var stripped = tempResult.filter(function(res) { return res.value !== input.value }); if (stripped.length < tempResult.length) { tempResult = stripped; } else { tempResult = tempResult.concat([input]); } });
array.indexOf
var tempResult = []; inputSet.forEach(function(input) { var index = tempResult.findIndex(function(res) { return res.value === input.value }); 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.

Let's break down the provided benchmark and its options.

**Benchmark Definition**

The test compares two JavaScript methods: `filter` and `indexOf`. Both methods are used to search, add, and remove elements from an array.

**Filter Method (Array.prototype.filter)**

The filter method creates a new array with all elements that pass the test implemented by the provided function. In this case, it's used to check if an element is not equal to another element in the `inputSet` array. The pros of using `filter` are:

* It returns a new array, which means the original array remains unchanged.
* It can be used with other methods like `map`, `reduce`, and `forEach`.
* It's a standard method in JavaScript.

However, there are some cons to consider:

* Performance-wise, it might not be as efficient as using `indexOf` for large arrays.
* It requires additional memory allocation, which can be a concern for very large datasets.

**IndexOf Method (Array.prototype.indexOf)**

The `indexOf` method returns the lowest index at which a specified element can be found in an array, or -1 if it's not present. In this case, it's used to find the index of an existing element in the `inputSet` array and then removing that element from the array.

Pros of using `indexOf` are:

* It's generally faster than `filter` for large arrays.
* It returns the actual index of the element, which can be useful for other operations.

However, there are some cons to consider:

* The method modifies the original array when used with `splice`.
* It requires a separate operation to remove the element after finding its index.

**Comparison**

The benchmark compares the execution time of both methods in a specific scenario. The test creates an array of 100,000 random objects and then iterates over it using `forEach`. For each iteration, it checks if an element is not equal to another element (using `filter`) or finds the index of an existing element (using `indexOf`). Finally, it removes the found element from the array.

**Library/ Framework Considerations**

In this benchmark, there's no explicit library or framework mentioned. The methods are part of the JavaScript standard library.

**Special JS Features/Syntax**

There's no special JavaScript feature or syntax used in this benchmark other than `forEach` and `map`, which is a modern JavaScript method introduced in ECMAScript 2015 (ES6).

**Alternatives**

If you're interested in exploring alternative methods, here are some options:

* Using `reduce` to remove elements from the array while searching for matches.
* Implementing a custom binary search algorithm using `indexOf`.
* Using other libraries or frameworks that provide similar functionality.

Keep in mind that these alternatives might not be directly comparable to the original benchmark, as they may have different performance characteristics or use different data structures.

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/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
array.filter	55.6 Ops/sec
array.indexOf	77.6 Ops/sec

Related benchmarks:

Array filter vs indexOf - search, add and remove an element (objects) (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):