Benchmark: JS Map<number, object> vs Array<{ number, object }>

Script Preparation code:


const object = (id) => ({ a: () => id, b: "id-" + id, });

const map = new Map();

const arr = [];

const max = 100_000;

for (let i = 0; i < max; i++) {
  	map.set(i, object(i));
  	arr.push({ id: i, ...object(i) });
}

const rng = () => Math.floor(Math.random() * max);

Tests:

Array.findIndex
const id = rng(); const index = arr.findIndex((obj) => obj.id === id);
Map.get
const id = rng(); const value = map.get(id);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.findIndex
Map.get

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 22 days ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.findIndex	2175.2 Ops/sec
Map.get	255799296.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 22 days ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares the performance of two data structure operations in JavaScript: retrieving a value from a `Map` and finding an index of an object in an `Array`. This comparison is essential for understanding the efficiency of different approaches to data management in JavaScript, particularly when considering performance in applications dealing with large datasets.

### Data Structures Tested:
1. **Map**
   - **Description**: A `Map` is a collection of key-value pairs where keys can be of any type, and each key is unique. In this benchmark, a `Map` is used to store objects indexed by numerical keys (0 to 99,999).
   - **Pros**:
     - Fast retrieval: Retrieving values using keys is generally O(1) time complexity.
     - Allows any data type as keys.
   - **Cons**:
     - More memory overhead compared to Arrays for keeping track of key-value pairs.

2. **Array**
   - **Description**: An `Array` in JavaScript is a list-like object that allows indexed access to its elements. In this benchmark, an `Array` of objects, each containing an `id` property and other associated properties, is created.
   - **Pros**:
     - Ordered collection, elements can be accessed via their numeric index.
     - Less memory overhead for simple datasets compared to Map (particularly with sequential numeric keys).
   - **Cons**:
     - Finding an element by a property (e.g., `id` in this case) requires scanning the entire array, resulting in O(n) time complexity.

### Comparisons of Test Cases:
1. **`Array.findIndex`**
   - The benchmark involves finding the index of an object in the array that matches a randomly generated `id` using the `findIndex` method. This method will traverse the array until it finds a match.
   - **Time Complexity**: O(n)
   - **Execution Speed**: The benchmark result indicates that the performance for this operation is significantly slower, with about 2,175 executions per second.

2. **`Map.get`**
   - This test benchmark involves retrieving the value associated with a randomly generated `id` directly from the map. The `get` method provides direct access to the value by its key.
   - **Time Complexity**: O(1)
   - **Execution Speed**: The performance for this operation is much faster, achieving about 255,799,296 executions per second, demonstrating the considerable advantage of using a `Map` for key-based access.

### Other Considerations:
- **Use Cases**: When choosing between `Map` and `Array`, consider the access patterns. If frequent lookups by a unique identifier are needed, `Map` is preferable. For scenarios where order is crucial or where you need to iterate through values, an `Array` may be more suitable.
- **Hybrid Models**: In some cases, one might use both structures in tandem, utilizing an `Array` for ordered data and a `Map` for fast lookups, providing a balance of performance and functionality.

### Alternatives:
- **Objects**: JavaScript objects can also serve as a key-value store similar to `Map`, but with limitations, such as only allowing strings as keys and not maintaining the order of insertion.
- **Sets**: If unique elements with quick lookup times are required, `Set` serves a distinct purpose by storing unique values and providing O(1) complexity for checks of presence, but it doesn’t store key-value pairs.
- **Performance**: In general, if performance is a critical factor, using `Map` for lookups and maintaining an array structure for other operations (e.g., ordered iteration) can provide an optimal solution.

Overall, the benchmark clearly illustrates the advantages of using a `Map` for efficient data retrieval when performance is crucial, especially as the dataset scales. This understanding is vital for software engineers when designing systems that require optimal data management and retrieval strategies.

Related benchmarks:

JS Map<number, object> vs Array<{ number, object }> (version: 1)

Comparing performance of: Array.findIndex vs Map.get

Created: 22 days ago by: Guest

Jump to the latest result

Array.findIndex

Map.get

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 22 days ago):