Benchmark: find vs findIndex vs filter with value

Script Preparation code:

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

Tests:

Array.prototype.find
const item = arr.find(item => item == 1E3);
Array.prototype.findIndex
const index = arr.findIndex(item => item == 1E3); const item = arr[index]
Array.prototype.filter
const item = arr.filter(item => item == 1E3)[0];

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Array.prototype.find

902K/s

Array.prototype.findIndex

885K/s

Array.prototype.filter

653K/s

Fastest: Array.prototype.find (1.4x faster)

View exact numbers

✓ Array.prototype.find: 902,305 ops/sec
• Array.prototype.findIndex: 884,858 ops/sec
• Array.prototype.filter: 652,734 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.find
Array.prototype.findIndex
Array.prototype.filter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Android 14; Mobile; rv:136.0) Gecko/136.0 Firefox/136.0

Browser/OS: Firefox Mobile 136 on Android

View result in a separate tab

Array.prototype.findIndex

221K/s

Array.prototype.find

221K/s

Array.prototype.filter

207K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.findIndex	221,226 Ops/sec
Array.prototype.find	220,538 Ops/sec
Array.prototype.filter	207,423 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark definition and individual test cases.

**Overview**

The website "MeasureThat.net" allows users to create and run JavaScript microbenchmarks, comparing different approaches for searching or filtering an array of values. In this case, we have three test cases: `Array.prototype.find`, `Array.prototype.findIndex`, and `Array.prototype.filter`.

**Benchmark Definition**

The benchmark definition is a JSON object that contains information about the benchmark:

* `Name`: The name of the benchmark, which is "find vs findIndex vs filter with value".
* `Description`: A brief description of the benchmark (empty in this case).
* `Script Preparation Code`: A JavaScript code snippet that initializes an array (`arr`) and populates it with values from 0 to 1000 using a `while` loop.
* `Html Preparation Code`: An empty string, indicating no HTML preparation is needed.

**Individual Test Cases**

There are three individual test cases:

1. **Array.prototype.find**
	* Benchmark Definition: `const item = arr.find(item => item == 1E3);`
	* Purpose: Find the first element in the array that matches the condition.
2. **Array.prototype.findIndex**
	* Benchmark Definition: `const index = arr.findIndex(item => item == 1E3);\r\nconst item = arr[index]`
	* Purpose: Find the index of the first element in the array that matches the condition and then retrieve the element at that index.
3. **Array.prototype.filter**
	* Benchmark Definition: `const item = arr.filter(item => item == 1E3)[0];`
	* Purpose: Create a new array with only the elements that match the condition, and return the first (and in this case, only) element.

**Library and Special JS Features**

In none of the test cases are there any explicit library imports or usage. Additionally, there are no special JavaScript features or syntax used in these benchmarks.

**Options Compared**

The three benchmark test cases compare the performance of:

* `Array.prototype.find`: Directly finds the first matching element.
* `Array.prototype.findIndex`: Finds the index of the first matching element and then retrieves it.
* `Array.prototype.filter`: Creates a new array with only the matching elements, and returns the first (and in this case, only) element.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Array.prototype.find**:
	* Pros: Fastest execution time, as it directly searches for the first match.
	* Cons: May not be suitable if the array has no matches or is too large.
2. **Array.prototype.findIndex**:
	* Pros: More flexible than `find`, as it allows finding an index and then retrieving the value at that index.
	* Cons: Slightly slower execution time compared to `find`.
3. **Array.prototype.filter**:
	* Pros: Suitable for cases where you want to create a new array with matching elements.
	* Cons: Creates a new array, which can be memory-intensive if not done carefully.

**Other Alternatives**

Some alternative approaches to these benchmarks could include:

* Using `Array.prototype.forEach` or a similar method to iterate over the array and find/match the desired element.
* Using a different data structure, such as a `Set`, to store the elements being searched for.
* Utilizing WebAssembly (WASM) or other just-in-time (JIT) compilation techniques to improve performance.

Please note that these alternatives are not directly related to the provided benchmark definition and might require additional context to be relevant.

find vs findIndex vs filter with value (version: 3) Benchmark.js

Comparing performance of: `Array.prototype.find vs Array.prototype.findIndex vs Array.prototype.filter`

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.find

Array.prototype.findIndex

Array.prototype.filter

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

find vs findIndex vs filter with value (version: 3) Benchmark.js

Comparing performance of: Array.prototype.find vs Array.prototype.findIndex vs Array.prototype.filter

Created: 2 years ago by: Registered User

Go to the latest result

Array.prototype.find

Array.prototype.findIndex

Array.prototype.filter

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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.find vs Array.prototype.findIndex vs Array.prototype.filter`