Benchmark: Array.find vs. Map.get 300

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

Tests:

Array.find, 3elements
const target = getRandomInt(2); array_small.find(el => el.id === target);
Map.get, 3 elements
const target = getRandomInt(2); map_small.get(target);
Array.find, 100 elements
const target = getRandomInt(99); array_large.find(el => el.id === target);
Map.get, 100 elements
const target = getRandomInt(999); map_large.get(target)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days 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 methods: `Array.find()` and `Map.get()`. The test measures the execution time of these methods on different arrays, specifically small (3 elements) and large (100 elements).

**Options Compared**

There are three main options compared:

1. **`Array.find()`**: This method returns the first element in an array that satisfies a provided testing function.
2. **`Map.get()`**: This method returns the value associated with the specified key from a map.
3. **Conversion from Array to Map**: The test also measures the performance of converting an array to a map using the `arrayToMap()` function.

**Pros and Cons**

Here are some pros and cons of each approach:

*   **`Array.find()`**:
    *   Pros: Simple, straightforward implementation, easy to understand.
    *   Cons: May be slower than `Map.get()` for large datasets because it needs to search through the entire array.
*   **`Map.get()`**:
    *   Pros: Efficient, as map lookups are typically O(1) operations.
    *   Cons: Requires a map data structure, which may not be necessary or efficient for small arrays.
*   **Conversion from Array to Map**:
    *   Pros: Can take advantage of map's efficient lookup times.
    *   Cons: May incur additional overhead due to the conversion process.

**Library and Special JS Features**

The test uses a custom `arrayToMap()` function, which converts an array to a map. This library is used to create maps from arrays, allowing for efficient lookups using `Map.get()`. No special JavaScript features are required or mentioned in this benchmark.

**Other Considerations**

When choosing between these approaches, consider the following factors:

*   Data structure: If you're working with large datasets, a map may be more efficient. For small arrays, `Array.find()` might suffice.
*   Complexity: The conversion from array to map adds complexity and potential overhead. Weigh this against the benefits of using a map for lookups.

**Alternatives**

If you're looking for alternative approaches or optimizations:

*   **`Map.from()`**: Instead of converting an array to a map, consider using `Map.from()`, which creates a new map from an iterable (in this case, an array).
*   **Caching**: If you need to perform these lookups frequently, consider caching the results in a smaller data structure, like a `Set` or `Map`.

In summary, the benchmark provides insight into the performance differences between `Array.find()`, `Map.get()`, and converting arrays to maps. By understanding the pros and cons of each approach, you can make informed decisions about which method best suits your specific use case.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.find, 3elements	4141870.0 Ops/sec
Map.get, 3 elements	4992838.0 Ops/sec
Array.find, 100 elements	3324702.8 Ops/sec
Map.get, 100 elements	5283624.5 Ops/sec

Related benchmarks:

Array.find vs. Map.get 300 (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, 3elements vs Map.get, 3 elements vs Array.find, 100 elements vs Map.get, 100 elements

Created: 2 months ago by: Guest

Jump to the latest result

Array.find, 3elements

Map.get, 3 elements

Array.find, 100 elements

Map.get, 100 elements

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 24 days ago):