Benchmark: Array.find vs. Map.get smaller

Array.find vs. Map.get smaller (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 Array.find, 1 000 000 elements vs Map.get, 1 000 000 elements vs Array to Map + Map.get, 1 lookup vs Array to Map + Map.get, 10 lookups vs Array to Map + Map.get, 100 lookups vs Array.find, 10 lookups vs Array.find, 100 lookups

Created: 3 days ago by: Guest

Jump to the latest result

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(10000);

map_small = arrayToMap(array_small);
map_large = arrayToMap(array_large);

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);
Array.find, 1 000 000 elements
const target = getRandomInt(999999); array_large.find(el => el.id === target);
Map.get, 1 000 000 elements
const target = getRandomInt(999999); map_large.get(target)
Array to Map + Map.get, 1 lookup
const map = arrayToMap(array_small); const target = getRandomInt(9999); map.get(target);
Array to Map + Map.get, 10 lookups
const map = arrayToMap(array_small); for (let i = 0; i < 10; i++) { const target = getRandomInt(9999); map.get(target); }
Array to Map + Map.get, 100 lookups
const map = arrayToMap(array_small); for (let i = 0; i < 100; i++) { const target = getRandomInt(9999); map.get(target); }
Array.find, 10 lookups
for (let i = 0; i < 10; i++) { const target = getRandomInt(9999); array_small.find(el => el.id === target) }
Array.find, 100 lookups
for (let i = 0; i < 100; i++) { const target = getRandomInt(9999); array_small.find(el => el.id === 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
Array.find, 1 000 000 elements
Map.get, 1 000 000 elements
Array to Map + Map.get, 1 lookup
Array to Map + Map.get, 10 lookups
Array to Map + Map.get, 100 lookups
Array.find, 10 lookups
Array.find, 100 lookups

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Opera 114 on Windows

View result in a separate tab

Test name	Executions per second
Array.find, 100 elements	15263235.0 Ops/sec
Map.get, 100 elements	72274072.0 Ops/sec
Array.find, 1 000 000 elements	72199.7 Ops/sec
Map.get, 1 000 000 elements	74766064.0 Ops/sec
Array to Map + Map.get, 1 lookup	374260.4 Ops/sec
Array to Map + Map.get, 10 lookups	361706.3 Ops/sec
Array to Map + Map.get, 100 lookups	285154.0 Ops/sec
Array.find, 10 lookups	1029716.0 Ops/sec
Array.find, 100 lookups	106560.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net compares the performance of two JavaScript methods for looking up elements in collections: `Array.find` and `Map.get`. The tests are specifically designed to assess how these methods perform with different array sizes as well as the effects of converting an array to a map prior to lookups.

### Benchmark Overview

- **Name:** Array.find vs. Map.get smaller
- **Description:** The benchmark tests the performance of `Array.find` and `Map.get` with varying array sizes, with additional tests evaluating the performance impact of converting an array to a map.

### Key Comparisons

1. **Array.find**
   - **Usage:** `array.find(el => el.id === target)`
   - **Structure:** This method searches through the array for an element that matches the condition defined in the callback function and returns the first found element or `undefined`.
   - **Pros:**
     - Simple and straightforward to use when dealing with arrays.
     - No need for preprocessing if accessing elements by a property like `id`.
   - **Cons:**
     - Performs a linear search, which has a time complexity of O(n). This makes it inefficient for larger collections, as it must check each element until it finds a match.
   
2. **Map.get**
   - **Usage:** `map.get(target)`
   - **Structure:** The `Map` object allows associates keys with values, where each key is unique. The `get` method retrieves the value associated with the specified key in constant time (O(1)).
   - **Pros:**
     - Offers significantly faster lookups compared to searching through an array, particularly for larger datasets.
     - Ideal for scenarios requiring frequent lookups since the underlying data structure is optimized for this purpose.
   - **Cons:**
     - Requires conversion from an array to a map, which has an overhead and needs additional memory.
     - If only a few lookups are needed, the conversion step may not be worthwhile.

### Test Cases

The benchmark defines several test cases, each highlighting different conditions and their impacts:

1. **Single Lookups in Small Arrays:**
   - `Array.find` and `Map.get` tested with 100 elements show how each method's performance starts differing. The results reveal that `Map.get` is significantly faster than `Array.find`.

2. **Single Lookups in Large Arrays:**
   - Comparisons with 1,000,000 elements illustrate the performance degradation of `Array.find` due to its linear search, while `Map.get` remains efficient.

3. **Conversions and Multiple Lookups:**
   - Several tests include preprocessing an array into a map (`arrayToMap`) followed by single and multiple lookups using `Map.get`. The results show diminishing returns; the overhead of conversion is outweighed by the speed of accessing data repeatedly.

### Other Considerations

- **Memory vs. Speed Trade-off:** Depending on the specific requirements of a project (e.g., frequency of lookups vs. memory constraints), developers must consider whether to use an array or a map. For cases with rare lookups, arrays may suffice; for frequent lookups, maps are preferable despite their higher memory usage.
- **JavaScript Features:** While this benchmark doesn’t showcase unique JavaScript features beyond the standard methods being tested (`find` and `get`), it provides context on collection and asynchronous programming in JavaScript and how data structures can optimize different use cases.

### Alternative Approaches

- **ES6 Set:** If only unique values are necessary (i.e., no associated data), `Set` might be an alternative for quick membership tests using `has()`.
- **Indexed Data Structures:** For even more complex scenarios, data structures like balanced trees or tries can be implemented to offer better performance in regulated environments, though they may require additional setup and management.

This benchmark provides insights into practical usage patterns and optimal data structures in JavaScript, which can guide developers in making informed decisions tailored to their application needs.

Related benchmarks:

Array.find vs. Map.get smaller (version: 1)

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

Created: 3 days ago by: Guest

Jump to the latest result

Array.find, 100 elements

Map.get, 100 elements

Array.find, 1 000 000 elements

Map.get, 1 000 000 elements

Array to Map + Map.get, 1 lookup

Array to Map + Map.get, 10 lookups

Array to Map + Map.get, 100 lookups

Array.find, 10 lookups

Array.find, 100 lookups

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):