Benchmark: Filter vs indexOf Speed small sized array

Script Preparation code:


var testArray = [];
for (var i = 0; i < 100; i++) {
  testArray.push(Math.floor(i * 1000) + 1)
}

Tests:

remove finding element using indexof
function removeElement(testArray, element) { return ( index = testArray.indexOf(element) !==-1) ? testArray.splice(index, 1):0; } removeElement(testArray, 99);
remove finding element using filter
function removeElement(testArray, element) { return testArray.filter(s => s !== element); } removeElement(testArray, 99);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
remove finding element using indexof
remove finding element using filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
remove finding element using indexof	8418235.0 Ops/sec
remove finding element using filter	4199596.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is being tested, compared, and the pros and cons of each approach.

**Benchmark Test Case**

The test case measures the performance difference between two approaches to remove an element from an array:

1. `indexOf` method: This method searches for the specified value in the array and returns its first occurrence index. If the value is not found, it returns -1.
2. `filter()` method: This method creates a new array with all elements that pass a test provided by a function.

**Script Preparation Code**

The script preparation code initializes an empty array `testArray` and populates it with 100 elements using a loop. Each element is calculated as `Math.floor(i * 1000) + 1`, where `i` ranges from 0 to 99.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark only tests the JavaScript code itself and does not include any additional overhead or noise from HTML rendering.

**Library**

The `indexOf` method uses the built-in JavaScript `Array.prototype.indexOf()` method. The `filter()` method also relies on the built-in JavaScript `Array.prototype.filter()` method, as well as the `Array.prototype.splice()` method to remove elements from the array.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. Both approaches use standard JavaScript methods and operators.

**Pros and Cons of each approach:**

1. **indexOf Method**
	* Pros:
		+ Faster lookup time, especially for large arrays.
		+ Can be more efficient when the element is not present in the array, as it returns -1 immediately.
	* Cons:
		+ Slower overall performance due to the need to search through the entire array.
		+ May cause issues if the array is modified concurrently.
2. **Filter Method**
	* Pros:
		+ More flexible and reusable, as it allows for more complex filtering conditions.
		+ Can be more efficient when removing multiple elements from the array, as it uses a single method call.
	* Cons:
		+ Slower overall performance due to the creation of a new array with filtered elements.
		+ May cause issues if the array is modified concurrently.

**Other Alternatives**

If you need to remove an element from an array, other alternatives might include:

1. `Array.prototype.reduce()`: This method can be used in combination with `Array.prototype.filter()` to create a new array with filtered elements.
2. Manual loop-based approach: Using a traditional loop to iterate through the array and remove elements one by one.

In general, for small arrays or cases where performance is not critical, the `filter()` method might be sufficient. However, for larger arrays or performance-critical applications, the `indexOf` method might be more suitable due to its faster lookup time.

Related benchmarks:

Filter vs indexOf Speed small sized array (version: 0)

Filter vs indexOf in array remove element Javascript

Comparing performance of: remove finding element using indexof vs remove finding element using filter

Created: 2 years ago by: Guest

Jump to the latest result

remove finding element using indexof

remove finding element using filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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