Benchmark: Searching in an array of objects

Script Preparation code:

const fruits = [
    "Apple", "Banana", "Cherry", "Date", "Elderberry",
    "Fig", "Grape", "Honeydew", "Iced Raspberry", "Jackfruit",
    "Kiwifruit", "Lemon", "Mango", "Nectarine", "Orange",
    "Peach", "Pear", "Quince", "Raspberry", "Strawberry",
    "Tangerine", "Ugli Fruit", "Vine Fruit", "Watermelon", "Xigua"
];

var ARRAY = fruits.map((fruit) => ({name: fruit, desc: `Description ${fruit}`}));

Tests:

For
let el; for(var i=0; i < ARRAY.length; i++) { if(ARRAY[i].name == 'Jackfruit') { el = ARRAY[i]; break; } }
Array.find
const el = ARRAY.find((obj) => obj.name === 'Jackfruit');
Array.findIndex
const el = ARRAY[ARRAY.findIndex((obj) => obj.name === 'Jackfruit')];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For
Array.find
Array.findIndex

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON for you.

**Benchmark Definition**

The benchmark measures the performance of three different methods to search for an element in an array:

1. **For loop**: A traditional `for` loop is used to iterate over the array and find the desired element.
2. **Array.find()**: The `find()` method is used with a callback function to search for the first matching element in the array.
3. **Array.findIndex()**: The `findIndex()` method is used with a callback function to find the index of the first matching element in the array, and then access that element using indexing.

**Script Preparation Code**

The script preparation code creates an array of objects (`ARRAY`) by mapping each fruit name to an object with two properties: `name` (the fruit name) and `desc` (a description string).

**Html Preparation Code**

There is no HTML preparation code provided, which suggests that the benchmark is focused on JavaScript performance rather than DOM manipulation.

**Library Used**

None, as there are no external libraries used in the script preparation code.

**Special JS Features or Syntax**

The benchmark uses the following special JavaScript features:

* **Template literals**: The `desc` property of each object in the `ARRAY` is created using template literals (the `${}` syntax).
* **Arrow functions**: Both the callback function for `find()` and `findIndex()` uses arrow functions (`() => { ... }`).

**Options Compared**

The benchmark compares the performance of three different methods:

1. **For loop**: A traditional `for` loop is used to iterate over the array.
2. **Array.find()**: The `find()` method is used with a callback function to search for the first matching element in the array.
3. **Array.findIndex()**: The `findIndex()` method is used with a callback function to find the index of the first matching element in the array, and then access that element using indexing.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **For loop**:
	* Pros: Control over iteration, easy to implement.
	* Cons: Can be slower than other methods due to the overhead of incrementing the loop counter.
2. **Array.find()**:
	* Pros: Concise and expressive, can be faster than a `for` loop for large arrays.
	* Cons: May not be suitable for all cases (e.g., if you need to find an element at a specific index).
3. **Array.findIndex()**:
	* Pros: Fast and efficient, allows for indexing into the array.
	* Cons: Requires careful handling of edge cases (e.g., what happens if no elements match?).

**Other Considerations**

When writing benchmarks, it's essential to consider factors like:

* Array size and distribution
* Hardware and software configurations
* Optimization techniques

In this case, the benchmark only measures performance for a fixed-size array, so these considerations are less relevant.

As an alternative to this benchmark, you could also explore other methods, such as:

* Using `Array.prototype.some()` or `Array.prototype every()`
* Utilizing native Web Workers or parallel processing
* Optimizing array access patterns using techniques like caching or memoization

Latest run results:

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

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

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
For	1197296.6 Ops/sec
Array.find	18027214.0 Ops/sec
Array.findIndex	10713032.0 Ops/sec

Related benchmarks:

Searching in an array of objects (version: 0)

Comparing performance of: For vs Array.find vs Array.findIndex

Created: 4 months ago by: Guest

Jump to the latest result

For

Array.find

Array.findIndex

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