Benchmark: Object arrays: findIndex vs for loop

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

Historical Performance Data aggregated from 219 community runs

Desktop Results:

Chrome 166 runs

findIndex

1K/s

for loop

501/s

Fastest: findIndex (2.6x faster)

View exact numbers

✓ findIndex: 1,316 ops/sec
• for loop: 501 ops/sec

Firefox 40 runs

for loop

58K/s

findIndex

12K/s

Fastest: for loop (5.0x faster)

View exact numbers

✓ for loop: 58,255 ops/sec
• findIndex: 11,718 ops/sec

Mobile Results:

Safari 8 runs

findIndex

2K/s

for loop

782/s

Fastest: findIndex (2.4x faster)

View exact numbers

✓ findIndex: 1,873 ops/sec
• for loop: 782 ops/sec

Chrome 5 runs

findIndex

797/s

for loop

311/s

Fastest: findIndex (2.6x faster)

View exact numbers

✓ findIndex: 797 ops/sec
• for loop: 311 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
findIndex
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 146 on Linux

View result in a separate tab

for loop

12K/s

findIndex

5K/s

View exact numbers

Test name	Executions per second
✓ for loop	12,111 Ops/sec
findIndex	5,065 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 data and explain what's being tested in the benchmark.

**Benchmark Definition**

The benchmark is testing two approaches to find an object in an array:

1. Using `arr.findIndex((itm) => itm.id === foo);`
2. Using a traditional `for` loop: `for (let i = 0; i < arr.length; i++) { if (arr[i].id === foo) break; }`

**Options Compared**

The benchmark is comparing the performance of these two approaches:

* **`arr.findIndex()`**: This method returns the index of the first element in the array that satisfies the provided condition. If no elements satisfy the condition, it returns -1.
* **Traditional `for` loop**: This approach uses a manual loop to iterate through the array and checks each element's property until it finds the desired one.

**Pros and Cons**

**`arr.findIndex()`**:

Pros:

* Concise and readable code
* Efficient for arrays with many elements, as it stops searching once it finds the desired element

Cons:

* May not be optimized for small arrays or certain browsers
* Can throw an error if the array is empty or `foo` is not found in the array

**Traditional `for` loop**:

Pros:

* Well-understood and widely supported across browsers
* Can be useful for situations where `arr.findIndex()` might not work (e.g., older browsers)

Cons:

* More verbose code compared to `arr.findIndex()`
* May be slower than `arr.findIndex()` for large arrays

**Other Considerations**

* The benchmark assumes that the array is relatively large (`15000` elements), which may affect the performance difference between these two approaches.
* Browsers like Chrome have optimized their implementations of `arr.findIndex()` to make it more efficient, but this might not be the case for other browsers or older versions.

**Library and Special JS Features**

There is no library explicitly mentioned in the provided code. However, `Math.random()` is used to generate a random index (`foo`), which suggests that JavaScript's built-in `random` function is being utilized. This is a standard feature of the JavaScript language and does not require any additional libraries.

**Special JS Feature or Syntax**

The use of `map()` in the script preparation code (`arr.map((el, idx) => el.id = idx);`) is an example of JavaScript's built-in `map()` function, which creates a new array with the results of applying a provided function to each element. This feature is not specific to any library or syntax extension.

**Alternatives**

Other alternatives for finding an object in an array include:

* Using `find()` instead of `findIndex()`: returns the first matching element or undefined if no elements match.
* Utilizing libraries like Lodash (e.g., `_.find(arr, (elm) => elm.id === foo)`), which provides a more concise and expressive way to perform array searches.
* Using other languages' built-in functions for finding elements in arrays, such as Python's `next()` or PHP's `array_search()`.

These alternatives may have their own performance characteristics and are not directly comparable to the `arr.findIndex()` approach.

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

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

Comparing performance of: `findIndex vs for loop`

Created: 5 years ago by: Guest

Go to the latest result

findIndex

for loop

Historical Performance Data aggregated from 219 community runs

Desktop Results:

Chrome 166 runs

Firefox 40 runs

Mobile Results:

Safari 8 runs

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

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

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

Comparing performance of: findIndex vs for loop

Created: 5 years ago by: Guest

Go to the latest result

findIndex

for loop

Historical Performance Data aggregated from 219 community runs

Desktop Results:

Chrome 166 runs

Firefox 40 runs

Mobile Results:

Safari 8 runs

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: `findIndex vs for loop`