Benchmark: findIndex vs indexOf - JavaScript performance with objects

Script Preparation code:

let arr = new Array(15000);
arr.fill({
    id: 0,
    stuff: "stuff"
});
arr = arr.map((el, idx) => ({
    ...el,
    id: idx
}));
let foo = arr.find((el) => el.id === Math.floor(Math.random() * 15000));

Tests:

findIndex
let index = arr.findIndex((el) => el === foo);
indexOf
let index = arr.indexOf(foo);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex
indexOf

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Linux

View result in a separate tab

indexOf

6.7M/s

findIndex

82K/s

View exact numbers

Test name	Executions per second
✓ indexOf	6,748,704 Ops/sec
findIndex	81,932 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark titled **"findIndex vs indexOf - JavaScript performance with objects"** is designed to assess the performance differences between two JavaScript methods, `findIndex` and `indexOf`, when used to locate an object within an array.

### Preparation Code Explanation

The preparation script for this benchmark creates an array of 15,000 objects, each containing an `id` property and a `stuff` property (with `stuff` containing a placeholder string). The `id` of each object is set to its index in the array. Subsequently, a variable `foo` is created, which is a randomly selected object from this array based on the `id`.

Here’s a breakdown of the object structure:
- **Object Structure**: 
  - `id`: A unique identifier for each object, which is crucial for the lookup operation.
  - `stuff`: A dummy property illustrating that the objects have more complexity than simple primitives.

### Individual Test Cases

The benchmark consists of two tests:
1. **findIndex**: 
   - Code: `let index = arr.findIndex((el) => el === foo);`
   - The `findIndex` method iterates through the array and returns the index of the first element that satisfies the provided testing function, which checks if the object is equal to `foo`.

2. **indexOf**: 
   - Code: `let index = arr.indexOf(foo);`
   - The `indexOf` method searches the array for the exact instance of `foo` and returns its index. This method relies on strict equality (`===`), which means that it will only succeed if the reference to the object (not its contents) matches.

### Performance Results

The latest benchmark results indicate the following:

- **indexOf**:
  - `Executions Per Second`: 6,748,704.0
  - This method is significantly faster than `findIndex`, primarily because it doesn't require the execution of any callback function and is optimized for reference comparisons.

- **findIndex**:
  - `Executions Per Second`: 81,931.7265625
  - This method is slower due to its need to execute a callback function for every element in the array to evaluate equality.

### Pros and Cons

#### `findIndex`
- **Pros**:
  - Flexible: Can be used with complex conditions beyond simple equality. This allows for more sophisticated searches (e.g., searching for an object based on multiple properties).
  
- **Cons**:
  - Performance: Slower compared to `indexOf` due to the overhead of executing a callback function for every element.

#### `indexOf`
- **Pros**:
  - Performance: Efficient for simple checks of object references when you are looking for exact matches. This method can quickly determine the index of an object if it exists in the array.
  
- **Cons**:
  - Limited to reference equality: This limits its usage when searching for objects that are equivalent in properties but not the same reference. If the property values are the same but not the same object instance, `indexOf` will return `-1`.

### Other Considerations

- If you need to find an object based on conditions that involve its properties, `findIndex` is the preferred choice. However, if you're dealing strictly with primitives or want performance for reference searches, `indexOf` is the way to go.
- Additionally, JavaScript has other alternatives like `filter`, which allows for the construction of a new array with all elements that pass the condition in the callback, but it may also introduce overhead and isn't directly comparable for index finding.

In summary, the choice between `findIndex` and `indexOf` depends on the context of the use case—specifically, whether the search is for object identity or object property values.

findIndex vs indexOf - JavaScript performance with objects (version: 1)

Comparing performance of: `findIndex vs indexOf`

Created: one year ago by: Guest

Go to the latest result

findIndex

indexOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

findIndex vs indexOf - JavaScript performance with objects (version: 1)

Comparing performance of: findIndex vs indexOf

Created: one year ago by: Guest

Go to the latest result

findIndex

indexOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `findIndex vs indexOf`