Benchmark: Array.find vs. Map.get small

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

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Map.get, 100 elements

108.8M/s

Array.find, 100 elements

15.6M/s

View exact numbers

Test name	Executions per second
✓ Map.get, 100 elements	108,811,000 Ops/sec
Array.find, 100 elements	15,560,640 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of two different methods for retrieving elements from a collection: `Array.find` and `Map.get`. It does this by comparing the two methods with a small array of objects, each representing an item with an `id` property.

### Options Compared
1. **Array.find**:
   - Usage: `array_small.find(el => el.id === target);`
   - This method searches through the array for an element that satisfies a specified condition, in this case, finding an object whose `id` matches a randomly chosen target integer.

2. **Map.get**:
   - Usage: `map_small.get(target);`
   - This method retrieves a value associated with a specified key (here, `target`) directly from a `Map` object, which is created by converting the array to a map where the keys are IDs and the values are the objects themselves.

### Pros and Cons
#### Array.find
**Pros**:
- Simple and straightforward to use.
- Works directly with an array without needing to convert it into a map.

**Cons**:
- Linear time complexity (`O(n)`) because it must potentially check each element until it finds a match, which can become very slow with larger datasets.

#### Map.get
**Pros**:
- Constant time complexity (`O(1)`), which allows for much faster lookups regardless of the number of elements, making it very efficient for larger datasets.
- Maps maintain the insertion order and can contain keys of any type.

**Cons**:
- Requires manual conversion of the array to a map, which has a time cost (`O(n)` for the mapping process).
- Slightly more complex to implement due to the conversion step.

### Other Considerations
- The benchmark measures performance on implementations that execute the retrieval methods using a small dataset of 100 elements. However, the efficacy of each method could vary with different dataset sizes (as indicated by the preparation of both small and large datasets).
- The benchmark results showed that `Map.get` significantly outperforms `Array.find` in terms of executions per second, which is particularly notable when working with larger datasets, suggesting that for frequent lookups, using a `Map` is beneficial.
- Since the benchmark tests are conducted on a specific browser and OS configuration (Chrome on Mac OS X), results could vary on different platforms or with different JavaScript engines due to optimizations.

### Alternatives
- **Object vs. Map**: Another alternative could involve using plain JavaScript objects for key-value pairs instead of `Map`. Objects provide similar functionality but have different behavior regarding key types (they convert non-string keys to strings).
- **Native Arrays**: One could also consider using methods like `Array.includes` or maintaining a sorted array and employing binary search algorithms to improve lookup times, although these would require additional operations for insertion.
  
This benchmark is instrumental for understanding efficiency trade-offs between different data structures and retrieval methods, which is critical in optimizing performance for applications, especially those handling large amounts of data.

Array.find vs. Map.get small (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`

Created: one year ago by: Guest

Go to the latest result

Array.find, 100 elements

Map.get, 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 (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

Created: one year ago by: Guest

Go to the latest result

Array.find, 100 elements

Map.get, 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`