Benchmark: findIndex vs find - JS Perf

Script Preparation code:

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

Tests:

findIndex
var index = arr.findIndex((num) => num === foo);
indexOf
var f = arr.find((num) => num === 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
findIndex	22256.2 Ops/sec
indexOf	22825.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark compares two different methods for searching an element within an array in JavaScript: `findIndex` and `find` (though named `indexOf` in the individual test case) to evaluate their performance.

### Benchmark Overview

1. **Data Preparation**:
   - An array of 15,000 elements is created and populated with objects where each object has an `id` property corresponding to its index.
   - A random index `foo` within the range of 0 to 14,999 is generated.

2. **Individual Test Cases**:
   - **findIndex**:
     ```javascript
     var index = arr.findIndex((num) => num === foo);
     ```
     This method returns the index of the first element in the array that satisfies the provided testing function (in this case, if the element equals `foo`). If no elements satisfy the testing function, it returns -1.
     
   - **find (Tested as indexOf)**:
     ```javascript
     var f = arr.find((num) => num === foo);
     ```
     Although labeled incorrectly as `indexOf`, this actually calls the `find` method. `find` returns the first element in the array that satisfies the testing function, rather than an index. If no elements match, it returns `undefined`.

### Comparison and Pros/Cons

- **findIndex**:
  - **Pros**:
    - Directly returns the index, making it suitable for scenarios where the index is needed.
    - Can use for additional logic that relies on the index after finding the element.
  - **Cons**:
    - Slightly more complex in terms of logic for reading the first matched value (needs an additional lookup if you want the value later).
    
- **find**:
  - **Pros**:
    - Simpler when the intention is to retrieve the element instead of its index.
    - Easier to work with if you expect to modify or use the element directly.
  - **Cons**:
    - It cannot be used directly for index retrieval, requiring more logic if the index is also needed.
    - Performance may differ based on what you need (index vs. value).

### Performance Results

The benchmark results indicate that `findIndex` executed at approximately 27,265 operations per second, while `find` (as `indexOf`) executed at about 23,535 operations per second. This suggests that for this specific scenario and dataset, `findIndex` is more performant than `find`.

### Other Considerations

1. **ArrayMethod Syntax**: Both `find` and `findIndex` use arrow function syntax, which is a modern JavaScript feature that provides a concise way to write function expressions, maintaining the correct context of `this`. It is a syntactic sugar over the traditional function expressions and helps in writing cleaner code.

2. **Alternatives**:
   - **forEach** and **for** loop: Traditional looping constructs could be used for iterating through the array, providing the most control, but typically at the cost of code brevity and readability.
   - **indexOf**: If you only want to find the index of primitive values in an array, the `indexOf` method could replace both approaches, although it does not work with objects unless they are the same reference.

The benchmark provides a useful reference for choosing the appropriate method based on performance needs and the desired outcome (index vs. value retrieval) while also reflecting on how modern JavaScript features aid in writing more efficient and readable code.

Related benchmarks:

findIndex vs find - JS Perf (version: 1)

Comparing performance of: findIndex vs indexOf

Created: one year ago by: Guest

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