Benchmark: Array.find vs. Map.get (small scale)

Array.find vs. Map.get (small scale) (version: 0) Benchmark.js

Comparing performance of: `Array.find, 10 elements vs Map.get, 10 elements vs Array.find, 100 elements vs Map.get, 100 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 years ago by: Guest

Go 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(10);
array_large = getArray(100);

map_small = arrayToMap(array_small);
map_large = arrayToMap(array_large);

Tests:

Array.find, 10 elements
const target = getRandomInt(9999); array_small.find(el => el.id === target);
Map.get, 10 elements
const target = getRandomInt(9999); map_small.get(target);
Array.find, 100 elements
const target = getRandomInt(999999); array_large.find(el => el.id === target);
Map.get, 100 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, 10 elements
Map.get, 10 elements
Array.find, 100 elements
Map.get, 100 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: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 134 on Android

View result in a separate tab

Map.get, 10 elements

111.3M/s

Map.get, 100 elements

106.3M/s

Array.find, 10 elements

55.7M/s

Array.find, 100 elements

10.5M/s

Array to Map + Map.get, 1 lookup

4.3M/s

Array.find, 10 lookups

3.8M/s

Array to Map + Map.get, 10 lookups

3.1M/s

Array to Map + Map.get, 100 lookups

786K/s

Array.find, 100 lookups

416K/s

View exact numbers

Test name	Executions per second
✓ Map.get, 10 elements	111,301,880 Ops/sec
Map.get, 100 elements	106,299,496 Ops/sec
Array.find, 10 elements	55,705,348 Ops/sec
Array.find, 100 elements	10,466,441 Ops/sec
Array to Map + Map.get, 1 lookup	4,338,972 Ops/sec
Array.find, 10 lookups	3,831,773 Ops/sec
Array to Map + Map.get, 10 lookups	3,121,109 Ops/sec
Array to Map + Map.get, 100 lookups	785,736 Ops/sec
Array.find, 100 lookups	416,247 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches: `Array.find` and `Map.get`. The test cases are designed to measure the execution time of each approach for small-scale (10 elements) and large-scale (100 elements) datasets.

**Options Compared**

There are four options compared:

1. **Array.find**: This method searches for an element in an array by providing a callback function that returns `true` when the desired element is found.
2. **Map.get**: This method retrieves the value associated with a given key from a Map object.
3. **Array to Map + Map.get**: This approach creates a Map from the array elements and then uses `Map.get` to retrieve the values.

**Test Cases**

The benchmark includes six test cases:

1. Small-scale dataset: 10 elements
2. Large-scale dataset: 100 elements
3. Array.find for small-scale dataset
4. Map.get for large-scale dataset
5. Array to Map + Map.get for small-scale dataset (one lookup)
6. Array to Map + Map.get for large-scale dataset (multiple lookups)

**What's Being Tested**

The benchmark is testing the performance of each approach in terms of execution time. The results indicate that:

* `Map.get` performs significantly better than `Array.find` for both small-scale and large-scale datasets.
* Creating a Map from the array elements (as in **Array to Map + Map.get**) can provide additional benefits, especially for large-scale datasets.

**Performance Analysis**

The benchmark results show that `Map.get` outperforms `Array.find` by orders of magnitude, even for small-scale datasets. This is because `Map.get` uses a hash table lookup, which has an average time complexity of O(1), whereas `Array.find` uses linear search, which has a worst-case time complexity of O(n).

The **Array to Map + Map.get** approach shows improved performance compared to `Array.find`, especially for large-scale datasets. This is likely due to the caching benefits provided by the Map data structure.

Overall, the benchmark highlights the importance of using optimized data structures and methods when working with arrays or maps in JavaScript.