Benchmark: Search in array - find vs for loop vs object vs map

Script Preparation code:

var arr = [];
for (let i = 0; i < 10000; i++) {
  arr.push({id: i, name: `object${i}`});
}

Tests:

Find
for (let i = 0; i < 10000; i+=2) { const val = arr.find(x => x.id === i); if (val.name !== `object${i}`) { throw new Error('wrong found'); } }
For loop
for (let i = 0; i < 10000; i+=2) { for (let j = 0, len = arr.length; j < len; j++) { if (arr[j].id === i) { const val = arr[j]; if (val.name !== `object${i}`) { throw new Error('wrong found'); } break; } } }
Object
const obj = arr.reduce((acc, x) => {acc[x.id] = x; return acc;}, {}); for (let i = 0; i < 10000; i+=2) { const val = obj[i]; if (val.name !== `object${i}`) { throw new Error('wrong found'); } }
Map
const mapping = new Map(arr.map(x => [x.id, x])); for (let i = 0; i < 10000; i+=2) { const val = mapping.get(i); if (val.name !== `object${i}`) { throw new Error('wrong found'); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Find
For loop
Object
Map

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares four different approaches to search for an object in an array: `find`, `for` loop, `object`, and `Map`. The benchmark measures the performance of each approach on a large dataset of 10,000 objects.

**Approaches Compared**

1. **Find**: Uses the `Array.prototype.find()` method to find the first element that satisfies the provided condition.
2. **For loop**: Uses a traditional `for` loop to iterate through the array and find the desired object.
3. **Object**: Uses the `Array.prototype.reduce()` method to create an object where each key is an ID from the original array, and then uses this object to search for the desired element.
4. **Map**: Creates a `Map` data structure from the original array and uses it to search for the desired element.

**Pros and Cons of Each Approach**

1. **Find**:
	* Pros: Simple and concise syntax, efficient implementation.
	* Cons: May not be as performant as other approaches for large datasets.
2. **For loop**:
	* Pros: Well-established and widely supported, can be optimized with early exits.
	* Cons: Can be slower than other approaches due to the overhead of iterating through the entire array.
3. **Object**:
	* Pros: Efficient implementation, can be faster than `find` for large datasets.
	* Cons: Requires more memory due to the creation of an intermediate object.
4. **Map**:
	* Pros: Efficient implementation, can be faster than `find` and `for loop` for large datasets.
	* Cons: May require more memory due to the creation of a map.

**Library Used**

None, but JavaScript's built-in data structures (`Array`, `Object`, and `Map`) are used throughout the benchmark.

**Special JS Feature/Syntax**

None mentioned explicitly, but the use of arrow functions (`x => x.id === i`) in the `find` approach is a modern JavaScript feature that can improve performance by avoiding the creation of unnecessary variables.

**Other Alternatives**

1. **Array.prototype.forEach()**: Similar to the `for` loop approach, but uses a more concise syntax.
2. **Array.prototype.findIndex()**: Similar to the `find` approach, but returns -1 instead of throwing an error if no element is found.
3. **Native array iteration**: Some browsers and platforms may have optimized native array iteration methods that can be used as alternatives.

**Benchmark Preparation Code**

The provided code creates a large array of 10,000 objects with unique IDs and names, using a `for` loop to populate the array.

**Individual Test Cases**

Each test case measures the performance of one specific approach. The test cases are:

1. **Find**: Measures the time taken by the `Array.prototype.find()` method.
2. **For loop**: Measures the time taken by a traditional `for` loop.
3. **Object**: Measures the time taken by the `Array.prototype.reduce()` method.
4. **Map**: Measures the time taken by creating a `Map` from the array and searching for elements using the `Map.prototype.get()` method.

**Latest Benchmark Result**

The latest results show that the `Object` approach is the fastest, followed closely by the `Map` approach. The `Find` and `For loop` approaches are slower due to their iterative nature.

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/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Find	21.5 Ops/sec
For loop	0.4 Ops/sec
Object	4009.9 Ops/sec
Map	1177.7 Ops/sec

Related benchmarks:

Search in array - find vs for loop vs object vs map (version: 0)

Compare different ways to search objects in an array given its id.

Comparing performance of: Find vs For loop vs Object vs Map

Created: 3 years ago by: Guest

Jump to the latest result

Find

For loop

Object

Map

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