Benchmark: Array.find vs. Map.get with very little items

Array.find vs. Map.get with very little items (version: 0)

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, 10 000 elements vs Map.get, 10 000 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: 2 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(2);
array_large = getArray(5);

map_small = arrayToMap(array_small);
map_large = arrayToMap(array_large);

Tests:

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

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

Browser/OS: Chrome 139 on Windows

View result in a separate tab

Map.get, 10 000 elements

63.4M/s

Map.get, 1 000 000 elements

62.7M/s

Array.find, 10 000 elements

34.4M/s

Array.find, 1 000 000 elements

29.5M/s

Array to Map + Map.get, 1 lookup

12.0M/s

Array to Map + Map.get, 10 lookups

6.1M/s

Array.find, 10 lookups

4.6M/s

Array to Map + Map.get, 100 lookups

1.1M/s

Array.find, 100 lookups

485K/s

View exact numbers

Test name	Executions per second
✓ Map.get, 10 000 elements	63,384,384 Ops/sec
Map.get, 1 000 000 elements	62,669,976 Ops/sec
Array.find, 10 000 elements	34,377,560 Ops/sec
Array.find, 1 000 000 elements	29,481,758 Ops/sec
Array to Map + Map.get, 1 lookup	12,016,540 Ops/sec
Array to Map + Map.get, 10 lookups	6,146,932 Ops/sec
Array.find, 10 lookups	4,642,073 Ops/sec
Array to Map + Map.get, 100 lookups	1,109,418 Ops/sec
Array.find, 100 lookups	484,549 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 test cases and explanations.

**Benchmark Test Cases:**

The test cases are designed to compare the performance of two approaches:

1. `Array.find()`
2. `Map.get()` with and without conversion from an array to a map.

There are four variations of `Map.get()`:

a. Single lookup
b. 10 lookups
c. 100 lookups

Each test case measures the executions per second for each approach on different data sizes (10,000 elements and 1,000,000 elements).

**Approach 1: Array.find()**

`Array.find()` is a method that searches for an element in an array and returns its index if found. The performance of this method depends on the size of the array and the efficiency of the underlying data structure.

**Approach 2: Map.get() with conversion to map**

Converting an array to a map involves creating a new data structure that maps each unique value in the array to a key. This process can be expensive, especially for large arrays.

The `Map.get()` method is then used to look up values in this map. The performance of this approach depends on the size of the map and the efficiency of the underlying data structure.

**Comparison:**

The test results show that `Array.find()` performs better than `Map.get()` with conversion to map for both small and large datasets. This is because `Array.find()` has a lower overhead compared to creating and searching in a map.

However, when using `Map.get()` without conversion (i.e., directly on the array), the performance is closer to that of `Array.find()`. This is likely due to the fact that the array's underlying data structure is optimized for fast lookups.

**Key Takeaways:**

* For most use cases, `Array.find()` is a better choice than using `Map.get()` with conversion to map.
* When working with large datasets, using `Map.get()` without conversion can provide competitive performance.
* Conversion from an array to a map can introduce significant overhead, making it less suitable for high-performance applications.