Benchmark: JS find vs indexOf then query

Script Preparation code:

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

Tests:

Array.find
const item = arr.find(item => item == 1E5);
Array.indexOf then query
const index = arr.indexOf(1E5); const item = arr[index];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.find
Array.indexOf then query

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.find	2221.8 Ops/sec
Array.indexOf then query	91808.3 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 is being tested.

**Benchmark Definition**

The benchmark definition represents a JavaScript microbenchmark that compares the performance of two approaches: using `Array.prototype.find()` versus combining `Array.prototype.indexOf()` with array indexing (`arr[index]`).

**Script Preparation Code**

The script preparation code creates an array `arr` with 100,000 elements and populates it with consecutive integers from 0 to 99,999. This is done using a simple loop that assigns each integer value to the corresponding index of the array.

**Options Compared**

Two options are being compared:

1. **Array.prototype.find()**: This method searches for an element in the array based on a provided callback function. The callback function takes three arguments: `value`, `index`, and `array`. In this case, the callback function checks if the value is equal to 100,000.
2. **Array.indexOf() + Array indexing (arr[index])**: This approach first finds the index of the target element using `Array.prototype.indexOf()` and then uses that index to access the corresponding element in the array.

**Pros and Cons**

* **Find()**: Pros:
	+ More concise and readable code
	+ Less memory usage since it only returns a single element if found, rather than an entire row (as would be required for indexing)
* Cons:
	+ May be slower due to the overhead of creating a callback function
	+ May not perform as well for large arrays or sparse data
* **IndexOf() + Array indexing**: Pros:
	+ Can be faster since it only involves two operations: finding an index and accessing an element at that index
	+ More suitable for sparse data or large arrays where `find()` might slow down due to overhead
* Cons:
	+ Requires more code and is less readable than using `find()`
	+ Involves creating a temporary variable (index) which may consume additional memory

**Library and Purpose**

The provided benchmark definition does not use any external libraries. It only relies on the built-in JavaScript Array prototype.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark definition. It only uses standard JavaScript constructs such as loops, arrays, and array methods (find(), indexOf(), etc.).

**Alternatives**

If you're looking for alternative approaches to compare performance in your own microbenchmarks, consider the following:

* Using `Array.prototype.some()` instead of `find()`
* Comparing the performance of different array data structures (e.g., ArrayBuffers, TypedArrays) or algorithms (e.g., linear search vs. binary search)
* Evaluating the impact of caching, memoization, or other optimization techniques on performance

Related benchmarks:

JS find vs indexOf then query (version: 0)

JS find vs indexOf then query

Comparing performance of: Array.find vs Array.indexOf then query

Created: one year ago by: Guest

Jump to the latest result

Array.find

Array.indexOf then query

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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