Benchmark: Array.find vs. Map.get 2

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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Map.get, 10 elements

66.5M/s

Map.get, 3 elements

66.3M/s

Array.find, 3elements

38.2M/s

Array.find, 10 elements

27.9M/s

Fastest: Map.get, 10 elements (2.4x faster)

View exact numbers

✓ Map.get, 10 elements: 66,500,816 ops/sec
• Map.get, 3 elements: 66,294,496 ops/sec
• Array.find, 3elements: 38,151,760 ops/sec
• Array.find, 10 elements : 27,930,634 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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, 10 elements
Map.get, 10 elements

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Map.get, 3 elements

153.4M/s

Map.get, 10 elements

151.4M/s

Array.find, 3elements

69.4M/s

Array.find, 10 elements

48.9M/s

View exact numbers

Test name	Executions per second
✓ Map.get, 3 elements	153,415,472 Ops/sec
Map.get, 10 elements	151,359,280 Ops/sec
Array.find, 3elements	69,420,896 Ops/sec
Array.find, 10 elements	48,855,388 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 provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of `Array.find()` and `Map.get()` methods in JavaScript. The tests are designed to measure the execution speed of these methods on different array sizes (small vs. large) with/without conversion from an array to a map.

**Options Being Compared**

Two main options are being compared:

1. **Array.find()**: This method searches for the first element in an array that satisfies the provided condition.
2. **Map.get()**: This method retrieves the value associated with a given key from a map (dictionary).

**Pros and Cons of Each Approach**

**Array.find():**

Pros:

* More intuitive and readable code
* Can be used on any type of collection, not just arrays

Cons:

* May have to iterate over the entire array if no match is found
* Can be slower than Map.get() for large datasets

**Map.get():**

Pros:

* Typically faster than Array.find() for large datasets due to its optimized internal data structure (hash tables)
* Can reduce memory usage by avoiding unnecessary iterations

Cons:

* Requires an additional data structure (map) to store the data
* May be less intuitive and readable code, especially for those without prior experience with maps

**Additional Considerations**

The benchmark also considers the conversion from an array to a map using `arrayToMap()`. This adds another variable to the test results, as it may impact performance. However, in most cases, this conversion would not significantly affect the overall performance of either method.

**Library and Syntax Used in Test Cases**

In these tests, no additional libraries are used beyond JavaScript's built-in `Array` and `Map` objects. The syntax for `Array.find()` and `Map.get()` is straightforward and follows standard JavaScript conventions.

**Special JS Features or Syntax (None)**

There are no special JavaScript features or syntax being used in this benchmark that would affect the results.

**Alternative Approaches**

If you're interested in exploring alternative approaches, here are a few options:

* **Using iterators**: Instead of using `Array.find()` and `Map.get()`, you could use iterators (e.g., `for...of` loops) to iterate over the array or map. This approach can provide more control over iteration but may not be as efficient.
* **Custom data structures**: You could create custom data structures (e.g., linked lists, binary search trees) to optimize search and retrieval operations. However, this would likely require significant changes to your codebase.

In summary, the benchmark compares the performance of `Array.find()` and `Map.get()` methods in JavaScript, considering different array sizes and conversions from arrays to maps. While there are pros and cons to each approach, `Map.get()` is typically faster for large datasets due to its optimized internal data structure.

Array.find vs. Map.get 2 (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, 10 elements vs Map.get, 10 elements`

Created: one year ago by: Guest

Go to the latest result

Array.find, 3elements

Map.get, 3 elements

Array.find, 10 elements

Map.get, 10 elements

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.find vs. Map.get 2 (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, 10 elements vs Map.get, 10 elements

Created: one year ago by: Guest

Go to the latest result

Array.find, 3elements

Map.get, 3 elements

Array.find, 10 elements

Map.get, 10 elements

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.find, 3elements vs Map.get, 3 elements vs Array.find, 10 elements vs Map.get, 10 elements`