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

Test name	Executions per second
Array.find, 100 elements	8211924.0 Ops/sec
Map.get, 100 elements	28598862.0 Ops/sec
Object, 100 elements	32090034.0 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.

Related benchmarks:

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

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