Benchmark: Array.find() vs for loop

Script Preparation code:

const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i }))
const elementToFind = 15000;

Tests:

Array.find
const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i })) const elementToFind = 15000; const element = arr.find((el) => el.property === elementToFind);
For-loop
const arr = Array.from({ length: 20000 }, (_, i) => ({ property: i })) const elementToFind = 15000; let element = undefined; for (let i = 0; i < arr.length; i++) { if (arr[i].property === elementToFind) { element = arr[i]; break; } }

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

For-loop

2K/s

Array.find

2K/s

Fastest: For-loop (1.1x faster)

View exact numbers

✓ For-loop: 1,996 ops/sec
• Array.find: 1,791 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.find
For-loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5.2 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

For-loop

17K/s

Array.find

16K/s

View exact numbers

Test name	Executions per second
✓ For-loop	16,586 Ops/sec
Array.find	15,951 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 benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is comparing the performance of `Array.find()` with a traditional for loop in JavaScript. The test creates an array of 20,000 elements and searches for a specific element (index 15,000) using both methods.

**Options Compared**

1. **`Array.find()`**: This method returns the first element in the array that satisfies the provided condition (in this case, `el.property === elementToFind`). If no such element is found, it returns `undefined`.
2. **Traditional For Loop**: The for loop iterates through each element of the array, checking if its `property` matches the target value. As soon as a match is found, the loop breaks and assigns the matched element to the `element` variable.

**Pros and Cons**

* **`Array.find()`**:
	+ Pros: concise, readable, and efficient for most use cases.
	+ Cons: may not be suitable for large arrays or performance-critical applications due to its overhead. In this case, it's worth noting that `Array.from()` is used to create the array, which can add additional overhead.
* **Traditional For Loop**:
	+ Pros: lightweight, easy to understand, and suitable for large arrays or performance-critical applications.
	+ Cons: can be more verbose and harder to read than `Array.find()`. Additionally, it requires manual index management.

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, it's worth noting that `Array.from()` is a standard JavaScript method for creating an array from an iterable.

**Special JS Feature or Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's already mentioned (e.g., arrow functions, template literals). If you're interested in exploring other features, consider looking into other benchmark tests.

**Other Alternatives**

If you want to explore alternative methods for searching arrays, here are a few options:

* **`Array.prototype.findIndex()`**: Similar to `Array.find()`, but returns the index of the first element that matches the condition (or -1 if no match is found).
* **`Array.prototype.map()`** and **`reduce()`**: While not exactly designed for searching, these methods can be used with a callback function to find elements in an array.
* **Native WebAssembly (WASM) Arrays**: If you're interested in exploring performance-critical applications on WASM, consider using native WASM arrays or libraries like `wasm-array-search`.

Keep in mind that the best approach will depend on your specific use case and requirements.

Array.find() vs for loop (version: 0)

Comparing performance of: `Array.find vs For-loop`

Created: 3 years ago by: Guest

Go to the latest result

Array.find

For-loop

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.find() vs for loop (version: 0)

Comparing performance of: Array.find vs For-loop

Created: 3 years ago by: Guest

Go to the latest result

Array.find

For-loop

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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.find vs For-loop`