Benchmark: Array.find vs map to object then lookup.

Array.find vs map to object then lookup. (version: 10)

For an array of objects, is multiple calls to Array.find performant? Can we improve find performance by first creating a flat array of just the object keys we are looking for, then calling Array.includes?

Comparing performance of: find value in the array each time vs lookup the value

Created: 3 years ago by: Registered User

Jump to the latest result

Script Preparation code:

var arr = [{
    num: 'one'
}, {
    num: 'two'
}, {
    num: 'three'
}, {
    num: 'four'
}, {
    num: 'five'
}, {
    num: 'six'
}, {
    num: 'seven'
}, {
    num: 'eight'
}, {
    num: 'nine'
}, {
    num: 'ten'
}];

Tests:

find value in the array each time
var ten = arr.find(n => n.num === 'ten'); var nine = arr.find(n => n.num ==='nine'); var eight = arr.find(n => n.num ==='eight'); var seven = arr.find(n => n.num ==='seven'); var six = arr.find(n => n.num ==='six'); var five = arr.find(n => n.num ==='five'); var four = arr.find(n => n.num ==='four'); var three = arr.find(n => n.num ==='three'); var two = arr.find(n => n.num ==='two'); var one = arr.find(n => n.num ==='one');
lookup the value
var nums = arr.map(o => o.num); var ten = nums.includes('ten'); var nine = nums.includes('nine'); var eight = nums.includes('eight'); var seven = nums.includes('seven'); var six = nums.includes('six'); var five = nums.includes('five'); var four = nums.includes('four'); var three = nums.includes('three'); var two = nums.includes('two'); var one = nums.includes('one');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
find value in the array each time
lookup the value

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:92.0) Gecko/20100101 Firefox/92.0

Browser/OS: Firefox 92 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
find value in the array each time	2349971.8 Ops/sec
lookup the value	5738100.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain what's tested on the provided JSON and describe the options compared, their pros and cons, and other considerations.

The benchmark is testing two approaches to find or look up values in an array of objects:

**Approach 1: Multiple calls to Array.find**

This approach involves calling `Array.find()` multiple times with different conditions to check if a specific value exists in the array. The condition uses the `===` operator to compare the value being searched for with the expected value.

**Approach 2: Create a flat array of object keys and then use Array.includes()**

This approach creates a new flat array containing only the object keys that are being looked up, and then uses `Array.includes()` to check if any of these values exist in the original array.

Now, let's discuss the pros and cons of each approach:

**Multiple calls to Array.find:**

Pros:

* Simple and straightforward implementation
* No need to create an intermediate data structure

Cons:

* Involves multiple function calls, which can lead to overhead due to context switching and potential cache thrashing.
* For large arrays or performance-critical code, this approach may be slower than creating a flat array of object keys.

**Create a flat array of object keys and then use Array.includes():**

Pros:

* Can be faster for large arrays because it reduces the number of function calls required to check if a value exists in the array.
* Can take advantage of browser optimizations, such as SIMD (Single Instruction, Multiple Data) instructions, which can improve performance.

Cons:

* Requires creating an intermediate data structure (the flat array), which may have memory overhead.
* May require additional processing to create the flat array, especially if it needs to be generated dynamically.

Other considerations:

* The benchmark result shows that `Array.includes()` performs better than multiple calls to `Array.find()`, which is expected given the reduced number of function calls required. However, the actual performance difference may depend on various factors, such as the specific use case, array size, and browser version.
* It's worth noting that both approaches have trade-offs between simplicity, memory usage, and performance.

Regarding the libraries used in the benchmark, none are explicitly mentioned in the provided code snippets. However, it's likely that `Array.find()` and `Array.includes()` are part of the ECMAScript standard, which is implemented by most modern JavaScript engines, including Firefox.

Special JS features or syntax are not mentioned in this explanation.

Related benchmarks: