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'); } }

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

Object

6K/s

Map

1K/s

Find

36/s

For loop

1/s

Fastest: Object (4096.3x faster)

View exact numbers

✓ Object: 5,684 ops/sec
• Map: 1,274 ops/sec
• Find: 36 ops/sec
• For loop: 1 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
Find
For loop
Object
Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Object

6K/s

Map

1K/s

Find

35/s

For loop

26/s

View exact numbers

Test name	Executions per second
✓ Object	6,170 Ops/sec
Map	1,370 Ops/sec
Find	35 Ops/sec
For loop	26 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

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

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

Created: 5 years ago by: Guest

Go to the latest result

Find

For loop

Object

Map

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

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

Created: 5 years ago by: Guest

Go to the latest result

Find

For loop

Object

Map

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 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: `Find vs For loop vs Object vs Map`