Benchmark: Array.find vs. Map.get fork

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

Tests:

Array.find, 10 000 elements
const target = getRandomInt(9); array_small.find(el => el.id === target);
Map.get, 10 000 elements
const target = getRandomInt(9); map_small.get(target);
Array.find, 1 000 000 elements
const target = getRandomInt(99); array_large.find(el => el.id === target);
Map.get, 1 000 000 elements
const target = getRandomInt(99); map_large.get(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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into explaining what is tested on the provided JSON that represents the benchmark.

**Benchmark Definition**

The benchmark tests the performance of two different approaches to find an element in an array: `Array.find` and `Map.get`. The test is designed to compare these two methods with varying array sizes (10,000 and 1,000,000 elements) and with/without conversion from array to map.

**Options Compared**

The two options being compared are:

1. **Array.find**: This method iterates through the array until it finds a match, returning the first matching element.
2. **Map.get**: This method directly accesses an element in the map using its key (the `id` property of the elements).

**Pros and Cons**

* **Array.find**:
	+ Pros: Works on arrays, easy to use, and intuitive.
	+ Cons: Can be slower than `Map.get` for large datasets because it iterates through the array, which can be expensive in terms of time and memory.
* **Map.get**:
	+ Pros: Generally faster than `Array.find` for large datasets because it uses a hash table to store the elements, allowing direct access by key. Additionally, it avoids iterating through the entire dataset.
	+ Cons: Requires creating a map first, which can be more memory-intensive and may have overhead due to object creation.

**Library**

The `arrayToMap` function converts an array into a map by mapping each element to a key-value pair in the map. The purpose of this function is to allow the test to compare `Array.find` with `Map.get` by using the same data structure (a map) for both approaches.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. It only uses standard JavaScript methods and functions.

**Other Considerations**

The benchmark also considers the size of the array: 10,000 elements vs. 1,000,000 elements. This allows the test to observe how the performance difference between `Array.find` and `Map.get` scales with larger datasets.

**Alternatives**

If you need alternative approaches for finding an element in an array or map, consider the following:

* For arrays:
	+ Using `for...of` loop to iterate through the array.
	+ Using `indexOf()` method to find the index of the element and then access it using `array[index]`.
* For maps:
	+ Using `has()` method to check if the key exists in the map before accessing it.
	+ Using a different data structure, such as a hash table or a balanced binary search tree.

These alternatives may offer better performance or more intuitive interfaces depending on your specific use case.

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.find, 10 000 elements	1649447.9 Ops/sec
Map.get, 10 000 elements	1627460.6 Ops/sec
Array.find, 1 000 000 elements	1607720.4 Ops/sec
Map.get, 1 000 000 elements	1717172.6 Ops/sec

Related benchmarks:

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

Created: 9 months ago by: Guest

Jump to the latest result

Array.find, 10 000 elements

Map.get, 10 000 elements

Array.find, 1 000 000 elements

Map.get, 1 000 000 elements

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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