Benchmark: Array.find vs. Map.get small vs Object

Script Preparation code:

function getRandomElement(id) {
  return {
    id,
    a: Math.random(),
    b: Math.random(),
    c: Math.random(),
  }
}

function getArray(length) {
  const result = [];
  for (let i = 0; i < length; i++) {
    result.push(getRandomElement(i))
  }
  
  return result;
}

function arrayToMap(array) {
  return new Map(array.map(el => [el.id, el]));
}

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

array_small = getArray(100);
array_large = getArray(1000000);

map_small = arrayToMap(array_small);
map_large = arrayToMap(array_large);


obj_small = Object.fromEntries(map_small)

Tests:

Array.find, 100 elements
const target = getRandomInt(99); array_small.find(el => el.id === target);
Map.get, 100 elements
const target = getRandomInt(99); map_small.get(target);
Object, 100 elements
const target = getRandomInt(99); obj_small[target]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.find, 100 elements
Map.get, 100 elements
Object, 100 elements

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Object, 100 elements

32.1M/s

Map.get, 100 elements

28.6M/s

Array.find, 100 elements

8.2M/s

View exact numbers

Test name	Executions per second
✓ Object, 100 elements	32,090,034 Ops/sec
Map.get, 100 elements	28,598,862 Ops/sec
Array.find, 100 elements	8,211,924 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark tests the performance of three different approaches to retrieving elements from a collection of objects based on a specific identifier (`id`). The comparison focuses on:

1. **Array.find**: This method searches an array for an element that satisfies a certain condition—specifically whether the element's `id` matches a given target.
2. **Map.get**: This method is used on a Map object, which is a collection of key-value pairs. It retrieves a value based on a specific key (in this case, the `id`).
3. **Object access**: This method accesses a property of a plain JavaScript object using bracket notation, where the `id` serves as the key to directly access the corresponding value.

### Description of Options Compared

1. **Array.find**:
   - **Pros**: 
     - Simple and straightforward syntax.
     - Useful when working with dynamic arrays where the dataset is not predetermined.
   - **Cons**: 
     - Linear search complexity (O(n)), meaning that as the size of the array grows, the lookup time increases linearly.
     - Performance may degrade significantly with larger datasets.

2. **Map.get**:
   - **Pros**: 
     - Offers constant-time complexity (O(1)) for lookups due to its underlying hash table structure. This allows for rapid access regardless of the number of elements.
     - This option is more efficient when frequent lookups are necessary.
   - **Cons**: 
     - Requires conversion from an array to a Map, which has its own overhead.
     - Slightly more complex than using a plain array.

3. **Object access**:
   - **Pros**:
     - Very fast property access, typically O(1), similar to `Map.get`.
     - Familiarity with object syntax makes it easy for JavaScript developers to use.
   - **Cons**:
     - Objects are less flexible than Maps, especially when it comes to dynamic or non-string keys.
     - If many entries need to be managed, manipulating an object can become cumbersome.

### Other Considerations

- The benchmark creates a small (100 elements) and a large array (1,000,000 elements). However, the provided test cases only evaluate retrieval from the small dataset.
- The nature of the tests (e.g., lookups) emphasizes the importance of choosing the right data structure based on expected use cases, such as read-heavy operations.

### Conclusion

In summary, this benchmark provides insight into the performance characteristics of using arrays, maps, and objects for lookups in JavaScript. For large datasets and frequent accesses, using a Map or an Object may yield better performance than an array, due to the linear search nature of `Array.find`. However, the best choice will ultimately depend on the specific needs of the application, including considerations of data structure modifications and ease of use. Alternatives such as Sets or even third-party libraries for advanced data structures may also be explored, especially in scenarios with more complex data retrieval needs or when performance at scale is crucial.

Array.find vs. Map.get small vs Object (version: 1)

Test the performance of Array.find vs. Map.get, with various array sizes, and with/without conversion from array to map

Comparing performance of: `Array.find, 100 elements vs Map.get, 100 elements vs Object, 100 elements`

Created: one year ago by: Guest

Go to the latest result

Array.find, 100 elements

Map.get, 100 elements

Object, 100 elements

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Array.find vs. Map.get small vs Object (version: 1)

Test the performance of Array.find vs. Map.get, with various array sizes, and with/without conversion from array to map

Comparing performance of: Array.find, 100 elements vs Map.get, 100 elements vs Object, 100 elements

Created: one year ago by: Guest

Go to the latest result

Array.find, 100 elements

Map.get, 100 elements

Object, 100 elements

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `Array.find, 100 elements vs Map.get, 100 elements vs Object, 100 elements`