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

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

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: one year 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(10);
array_large = getArray(100);

map_small = arrayToMap(array_small);
map_large = arrayToMap(array_large);

​x
 
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);
const target = getRandomInt(9999);
array_small.find(el => el.id === target);
Map.get, 10 elements
const target = getRandomInt(9999); map_small.get(target);
const target = getRandomInt(9999);
map_small.get(target);
Array.find, 100 elements
const target = getRandomInt(999999); array_large.find(el => el.id === target);
const target = getRandomInt(999999);
array_large.find(el => el.id === target);
Map.get, 100 elements
const target = getRandomInt(999999); map_large.get(target)
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);
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); }
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); }
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) }
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) }
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 12 days 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

Test name	Executions per second
Array.find, 10 elements	55705348.0 Ops/sec
Map.get, 10 elements	111301880.0 Ops/sec
Array.find, 100 elements	10466441.0 Ops/sec
Map.get, 100 elements	106299496.0 Ops/sec
Array to Map + Map.get, 1 lookup	4338972.5 Ops/sec
Array to Map + Map.get, 10 lookups	3121109.2 Ops/sec
Array to Map + Map.get, 100 lookups	785736.2 Ops/sec
Array.find, 10 lookups	3831773.2 Ops/sec
Array.find, 100 lookups	416246.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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:

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.
Map.get: This method retrieves the value associated with a given key from a Map object.
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:

Small-scale dataset: 10 elements
Large-scale dataset: 100 elements
Array.find for small-scale dataset
Map.get for large-scale dataset
Array to Map + Map.get for small-scale dataset (one lookup)
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.

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.

Related benchmarks: