Benchmark: Map.get versus Array.find for 10000 elements

Script Preparation code:

data = [...Array(100)].map((_, id) => ({ id, data: Math.random() }))
map = new Map(data.map(v => [v.id, v]))

Tests:

Map.get
const res = map.get(50)
Array.find
const res = data.find(({ id }) => id === 50)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map.get
Array.find

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
Map.get	12199944.0 Ops/sec
Array.find	8107955.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark measures the performance of two methods: `Map.get` and `Array.find`. The data used in the test consists of 10,000 elements, each represented by an object with an `id` property. A `Map` is created from this array using `Map` constructor, where each key-value pair maps to an object.

**Script Preparation Code**

The script preparation code creates a sample dataset:
```javascript
data = [...Array(100)].map((_, id) => ({ id, data: Math.random() }))
map = new Map(data.map(v => [v.id, v]))
```
This generates an array of 100 objects with random `data` properties and then creates a `Map` instance from this array.

**Html Preparation Code**

There is no HTML preparation code provided for this benchmark.

**Individual Test Cases**

The test cases measure the execution time of each method:

1. **Map.get**
```javascript
const res = map.get(50)
```
This test case retrieves a value from the `Map` instance using the key `50`.

2. **Array.find**
```javascript
const res = data.find(({ id }) => id === 50)
```
This test case finds an element in the `data` array that matches the condition `id === 50`.

**Performance Comparison**

The benchmark measures the execution time of each method, comparing the performance of:

* `Map.get`
* `Array.find`

**Pros and Cons:**

1. **Map.get**
	* Pros:
		+ Fast lookups, with an average time complexity of O(1) in modern browsers.
		+ Efficient use of memory, as it stores only unique keys.
	* Cons:
		+ Requires the key to be present in the map.
		+ May not perform well for large datasets or complex queries.
2. **Array.find**
	* Pros:
		+ Flexible and powerful, allowing for complex filtering conditions.
		+ Can handle large datasets, but has a slower average time complexity (O(n)).
	* Cons:
		+ May have higher overhead due to the need to iterate over the entire array.

**Library Used**

In this case, `Map` is used as a built-in JavaScript object. No external library or framework is required for this benchmark.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in these test cases. The focus is on the performance comparison between two standard methods: `Map.get` and `Array.find`.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

* Using `Array.from()` and `Object.values()` to create a map-like object.
* Utilizing other data structures like `Set` or `WeakMap` for fast lookups.
* Implementing custom search algorithms, such as binary search.

Keep in mind that these alternatives may have different performance characteristics, trade-offs, and use cases.

Related benchmarks:

Map.get versus Array.find for 10000 elements (version: 0)

Comparing performance of: Map.get vs Array.find

Created: 3 years ago by: Guest

Jump to the latest result

Map.get

Array.find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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