Benchmark: Object arrays: findIndex vs for loop with logging

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
const idx = arr.findIndex((itm) => itm.id === foo); console.log(idx)
for loop
for (let i = 0; i < arr.length; i++) { if (arr[i].id === foo) { console.log(i) break; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
findIndex
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 102 on Linux

View result in a separate tab

Test name	Executions per second
findIndex	1218.6 Ops/sec
for loop	488.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested, compared options, their pros and cons, and other considerations.

**Benchmark Definition:**
The benchmark tests two approaches for finding an object in an array:

1. `arr.findIndex((itm) => itm.id === foo)` (findIndex)
2. A traditional `for` loop with a condition to check if the element's `id` matches the target value (`foo`).

**Script Preparation Code:**
The script creates a large array of 15,000 objects with an `id` property that increments from 0 to 14,999. The array is then shuffled using `arr.map((el, idx) => el.id = idx);`. This ensures that the array's structure is randomized, making it more representative of real-world data.

**Options Compared:**

### findIndex

* **Approach:** Uses a binary search algorithm to find an element in the array.
* **Pros:**
	+ Faster for large arrays with millions of elements (as seen in this benchmark).
	+ More concise and expressive code.
* **Cons:**
	+ May be slower for small arrays due to the overhead of the algorithm.
	+ Can throw an error if the array is empty or `foo` is not found.

### Traditional For Loop

* **Approach:** Iterates through each element in the array, checking if its `id` matches the target value (`foo`).
* **Pros:**
	+ Simple and easy to understand.
	+ Can be faster for small arrays due to the lack of overhead.
* **Cons:**
	+ More verbose code compared to findIndex.
	+ May be slower for large arrays.

**Other Considerations:**

* The benchmark uses `Math.floor(Math.random() * 15000)` to generate a random index (`foo`) that can occur anywhere in the array. This helps simulate real-world scenarios where data is not always evenly distributed.
* The use of `const` and arrow functions makes the code more concise and modern.
* The test cases are written in a way that allows for easy comparison between the two approaches.

**Library:**
None

**Special JS Feature/Syntax:**
The benchmark uses ES6+ features, specifically:

* `const`
* Arrow functions (`() =>`)
* Template literals (`\r\narr.fill({ id: 0 });\r\n`)

These features are widely supported by modern browsers and help make the code more readable and concise.

**Alternatives:**

For large arrays, other approaches to find an element might include:

* Using a data structure like a `Map` or `Set`, which allows for efficient lookups.
* Utilizing libraries like Lodash or Underscore.js, which provide optimized implementations of these algorithms.
* Leveraging the browser's built-in methods, such as `Array.prototype.indexOf()` or `Array.prototype.includes()`, if available.

For small arrays, a traditional `for` loop might still be the most efficient approach.

Related benchmarks:

Object arrays: findIndex vs for loop with logging (version: 0)

Testing finding an object array via findIndex or by using a for loop

Comparing performance of: findIndex vs for loop

Created: 4 years ago by: Guest

Jump to the latest result

findIndex

for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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