Benchmark: JS Array IndexOf vs includes vs findIndex vs find

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;

Tests:

indexOf
const index = arr.indexOf(1E5);
includes
const included = arr.includes(1E5);
find
const item = arr.find(item => item == 1E5);
findIndex
const index = arr.findIndex(item => item == 1E5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
indexOf
includes
find
findIndex

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 days ago)

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

Browser/OS: Firefox 134 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
indexOf	20172.3 Ops/sec
includes	21426.7 Ops/sec
find	3551.7 Ops/sec
findIndex	3595.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark definition provides the context for the test cases. In this case, we have a JavaScript array `arr` with a specific size (100,000 elements) that is initialized in the script preparation code.

**Script Preparation Code**
```javascript
var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;
```
This code initializes an empty array `arr` and populates it with values from 0 to 100,000 using a while loop.

**Html Preparation Code**

The html preparation code is empty, which means that the test cases are executed in isolation, without any additional HTML context.

**Individual Test Cases**

We have four test cases that compare different methods for finding an element in the array:

1. `indexOf`
2. `includes`
3. `find`
4. `findIndex`

Let's break down each test case and explain what is being tested:

### 1. `indexOf`

`indexOf` searches for a specific value (`1E5`) in the array and returns its index if found, or -1 if not.

**Library:** None

**Pros:**

* Fast performance, especially for small arrays
* Simple to implement

**Cons:**

* May return incorrect results if the element is not found (returns -1)
* May be slower for large arrays due to the search algorithm

### 2. `includes`

`includes` checks if a specific value (`1E5`) exists in the array.

**Library:** `Array.prototype.includes()`

This method was introduced in ECMAScript 2015 and provides a more concise way to check if an element exists in an array, compared to using `indexOf()` or iterating through the array manually.

**Pros:**

* More concise and readable than `indexOf`
* Faster performance for large arrays

**Cons:**

* May be slower for small arrays due to the overhead of the method
* May return incorrect results if the element is not found (returns false)

### 3. `find`

`find` searches for a specific value (`1E5`) in the array and returns the first matching element or undefined if no match is found.

**Library:** `Array.prototype.find()`

This method was introduced in ECMAScript 2015 and provides a more concise way to find an element in an array, compared to iterating through the array manually using `forEach()` or `indexOf()`.

**Pros:**

* More concise and readable than using `indexOf()` or iterating through the array
* Faster performance for large arrays

**Cons:**

* May return undefined if no match is found
* May be slower for small arrays due to the search algorithm

### 4. `findIndex`

`findIndex` searches for a specific value (`1E5`) in the array and returns its index if found, or -1 if not.

**Library:** `Array.prototype.findIndex()`

This method was introduced in ECMAScript 2015 and provides a more concise way to find an element in an array and return its index, compared to using `indexOf()` or iterating through the array manually.

**Pros:**

* More concise and readable than using `indexOf()` or iterating through the array
* Faster performance for large arrays

**Cons:**

* May return -1 if no match is found
* May be slower for small arrays due to the search algorithm

**Other Considerations**

When comparing these methods, it's essential to consider the specific use case and requirements of your application. For example:

* If you need to find a specific value in an array and don't care about the index, `includes()` might be a good choice.
* If you need to find the first matching element in an array and return its value, `find()` might be a better option.
* If you need to find an element in an array and return its index, `findIndex()` or `indexOf()` might be suitable.

**Alternatives**

Some alternative methods for finding elements in arrays include:

* Using `forEach()` to iterate through the array manually
* Using `map()` or `filter()` to transform the array into a new array with specific values
* Using other libraries or frameworks that provide optimized search algorithms, such as `lodash` or ` Ramda`.

Related benchmarks:

JS Array IndexOf vs includes vs findIndex vs find (version: 0)

Comparing performance of: indexOf vs includes vs find vs findIndex

Created: 3 years ago by: Guest

Jump to the latest result

indexOf

includes

find

findIndex

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