Benchmark: findIndex vs map & indexOf vs find

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.indexOf(foo);
map and indexOf
var index = arr.map(o => o.id).indexOf(foo);
find
var found = arr.find(e => e.id === foo)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex
map and indexOf
find

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.105 Safari/537.36

Browser/OS: Chrome 89 on Linux

View result in a separate tab

Test name	Executions per second
findIndex	76733.9 Ops/sec
map and indexOf	3928.0 Ops/sec
find	731.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark tests three different approaches to find an element in an array: `findIndex`, `map` followed by `indexOf`, and `find`. The benchmark creates an array of 15,000 elements with a unique `id` property, fills it with random values, and then uses the test cases to search for a specific value.

**Options Compared**

1. **findIndex**: This method returns the index of the first element that satisfies the provided condition.
2. **map & indexOf**: This approach creates a new array with the desired properties using `map`, and then searches for the target value in this new array using `indexOf`.
3. **find**: This method returns the first element that satisfies the provided condition.

**Pros and Cons**

1. **findIndex**:
	* Pros: Efficient, simple, and concise.
	* Cons: May not be as intuitive for developers who are not familiar with it.
2. **map & indexOf**:
	* Pros: Allows for more control over the data transformation and searching process.
	* Cons: Creates a new array, which can lead to performance issues if the original array is large.
3. **find**:
	* Pros: More intuitive than `findIndex`, but may not be as efficient for large arrays.
	* Cons: May return `undefined` if no matching element is found.

**Library/Functionality Used**

None of the test cases use any external libraries or functions beyond the built-in JavaScript methods. However, it's worth noting that the `map` method uses a callback function to transform the elements in the array.

**Special JS Feature/Syntax**

None of the test cases employ any special JavaScript features or syntax beyond what is considered standard practice.

**Other Alternatives**

If you were to write this benchmark yourself, here are some alternative approaches you could consider:

* **filter**: Instead of `findIndex`, you could use the `filter` method to find the first element that satisfies the condition.
* **forEach**: You could also use a loop and the `forEach` method to iterate over the array and search for the target value.

**Benchmark Preparation Code Explanation**

The script preparation code creates an array of 15,000 elements with unique `id` properties. The line `arr.fill({ id: 0 });` initializes each element's `id` property to 0. Then, it uses the `map` method to transform these elements into objects with only the `id` property set to their original index.

The HTML preparation code is empty in this case, suggesting that the benchmark focuses solely on JavaScript performance and does not require any UI-related overhead.

**Latest Benchmark Result Explanation**

The results show the execution frequency per second for each test case on a Chrome 89 browser running on a Linux desktop. The values indicate how many times each test case was executed within a second.

Related benchmarks:

findIndex vs map & indexOf vs find (version: 0)

Comparing performance of: findIndex vs map and indexOf vs find

Created: 3 years ago by: Guest

Jump to the latest result

findIndex

map and indexOf

find

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