Benchmark: findIndex vs indexOf vs find vs filter - JavaScript performance

Script Preparation code:

var arr = new Array(15000);
arr.fill({ id: 0 });
arr = arr.map((el, idx) => el.id = idx);
var recId = Math.floor(Math.random() * 15000);

Tests:

findIndex
var index = arr.findIndex((num) => num === recId);
indexOf
var index = arr.indexOf(recId);
filter
var index = arr.filter((obj) => obj.id === recId);
find
var index = arr.find((obj) => obj.id === recId);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex
indexOf
filter
find

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

Browser/OS: Chrome 108 on Linux

View result in a separate tab

Test name	Executions per second
findIndex	5074.0 Ops/sec
indexOf	2618569.0 Ops/sec
filter	776.5 Ops/sec
find	792.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and test cases.

**Benchmark Definition:**
The website MeasureThat.net provides a JavaScript performance benchmarking platform where users can create and run microbenchmarks. In this specific case, we're testing four different approaches to find an element in an array:

1. `indexOf()`
2. `findIndex()`
3. `find()`
4. `filter()`

The script preparation code creates a large array (`arr`) with 15,000 elements, each containing an `id` property. The `recId` variable is randomly generated to be either within or outside the range of `arr`.

**Script Preparation Code:**
```javascript
var arr = new Array(15000);
arr.fill({ id: 0 });
arr = arr.map((el, idx) => el.id = idx);
var recId = Math.floor(Math.random() * 15000);
```
This code creates an array with a large number of elements and sets their `id` properties to incremental values.

**Html Preparation Code:**
The HTML preparation code is empty in this case.

**Individual Test Cases:**

1. `findIndex()`: Finds the index of the first element in the array that satisfies the provided condition.
2. `indexOf()`: Finds the index of the first occurrence of a specified value in the array.
3. `find()`: Returns the value of the first element in the array that satisfies the provided condition.
4. `filter()`: Creates a new array containing all elements from the original array that satisfy the provided condition.

**Library Used:**
No specific libraries are mentioned, but these methods are built-in to JavaScript.

**Special JS Features/Syntax:**
None of the tested methods use any special JavaScript features or syntax.

**Comparison of Approaches:**

1. `findIndex()`: This method is generally faster than `indexOf()` because it stops searching as soon as it finds a match.
	* Pros: Efficient, easy to read and maintain.
	* Cons: May not be suitable for arrays with multiple matching elements.
2. `indexOf()`: This method scans the entire array until it finds a match.
	* Pros: Works well with large arrays or when there's only one expected value.
	* Cons: Can be slow, especially for very large arrays.
3. `find()`: This method returns the first element in the array that satisfies the condition.
	* Pros: Easy to read and maintain, suitable for finding a single matching element.
	* Cons: May not be efficient if no elements satisfy the condition.
4. `filter()`: This method creates a new array containing all elements from the original array that satisfy the condition.
	* Pros: Can be more memory-efficient than other methods when dealing with large arrays.
	* Cons: Returns an entirely new array, which can be slower and use more resources.

**Other Alternatives:**
For large datasets or performance-critical applications, you might consider using alternative approaches like:

1. Using a data structure like a `Map` or `Set`, which offer faster lookup times than arrays.
2. Utilizing libraries like Lodash or Ramda, which provide optimized implementations of these methods.
3. Implementing a custom search algorithm tailored to your specific use case.

Keep in mind that the best approach depends on the specific requirements and constraints of your project.

Related benchmarks:

findIndex vs indexOf vs find vs filter - JavaScript performance (version: 0)

Comparing performance of: findIndex vs indexOf vs filter vs find

Created: 2 years ago by: Guest

Jump to the latest result

findIndex

indexOf

filter

find

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