Benchmark: Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf

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:

Array.prototype.findIndex
var index = arr.findIndex(el => el.id === foo);
Array.prototype.map + Array.prototype.indexOf
var index = arr.map(el => el.id).indexOf(foo);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.findIndex
Array.prototype.map + Array.prototype.indexOf

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Mac OS X 10.15

View result in a separate tab

Array.prototype.map + Array.prototype.indexOf

13K/s

Array.prototype.findIndex

8K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.map + Array.prototype.indexOf	12,993 Ops/sec
Array.prototype.findIndex	8,459 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark on the comparison of two approaches to find the index of an element in an array: `Array.prototype.findIndex` and `Array.prototype.map + Array.prototype.indexOf`. The benchmark aims to determine which approach is faster for large arrays.

**Options Compared**

Two options are compared:

1. **`Array.prototype.findIndex`**: This method returns the index of the first element that satisfies the provided callback function.
2. **`Array.prototype.map + Array.prototype.indexOf`**: This approach involves mapping each element in the array to a new value, and then finding the index of the desired value using `indexOf`.

**Pros and Cons**

*   **`Array.prototype.findIndex`**:
    *   Pros: More concise and expressive code, potentially faster for smaller arrays due to the early return feature.
    *   Cons: May have performance overhead due to the use of a callback function, which can be slower than iterating over the array explicitly. Also, it only returns the index of the first element that satisfies the condition, so if there are multiple elements with the desired property, it will only return one.
*   **`Array.prototype.map + Array.prototype.indexOf`**:
    *   Pros: Can handle cases where multiple elements have the desired property, and can be slower for smaller arrays due to the overhead of mapping. However, this approach can be more flexible and expressive in certain scenarios.
    *   Cons: More verbose code compared to `findIndex`, and potentially slower for large arrays.

**Library/Utilities**

In this benchmark, there is no explicit library or utility mentioned. Both `Array.prototype.findIndex` and `Array.prototype.map + Array.prototype.indexOf` are part of the standard JavaScript API.

However, if we were to extend this benchmark to include additional libraries or utilities, some options might include:

*   Lodash: A popular utility library that provides functions like `findIndex`, which can be used as an alternative to `Array.prototype.findIndex`.
*   Other array manipulation libraries: Depending on the specific use case and requirements, other libraries like Underscore.js or Ramda might provide optimized implementations for array operations.

**Special JS Feature/Syntax**

The benchmark does not explicitly test any special JavaScript features or syntax. It solely focuses on comparing the performance of two standard array methods.

However, it's worth noting that certain features like `for...of` loops or `async/await` syntax are not tested here, as they are not directly related to the comparison of these two specific array methods.

**Alternatives**

If you were to extend this benchmark to compare other approaches for finding the index of an element in an array, some alternatives might include:

*   Using a binary search algorithm: This approach can be faster for large arrays, but it requires sorting the array first.
*   Using a linear scan algorithm: This approach involves iterating over the array sequentially until the desired value is found.

Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf (version: 0)

Comparing performance of: `Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf`

Created: 5 years ago by: Registered User

Go to the latest result

Array.prototype.findIndex

Array.prototype.map + Array.prototype.indexOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf (version: 0)

Comparing performance of: Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf

Created: 5 years ago by: Registered User

Go to the latest result

Array.prototype.findIndex

Array.prototype.map + Array.prototype.indexOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf`