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

Script Preparation code:


const object = (id) => ({ a: () => id, b: "id-" + id, });

const map = new Map();

const arr = [];

const max = 100;

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: 4 months ago)

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

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Map.get

117.9M/s

Array.findIndex

14.5M/s

View exact numbers

Test name	Executions per second
✓ Map.get	117,856,384 Ops/sec
Array.findIndex	14,544,819 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmark that compares the performance of two data structures: a `Map` and an `Array`. Here's a detailed explanation of the benchmark setup, the tests conducted, and the implications for software engineers.

### Benchmark Overview

1. **Setup**:
   - A `Map` is used to store key-value pairs where each key is a number, and each value is an object generated by the `object` function.
   - An `Array` is also populated with the same objects but structured differently (each object contains an `id` property along with the other properties).

2. **Purpose of Data Structures**:
   - **Map**: A collection of keyed data items, where keys can be any value (in this case, numbers). It provides fast retrieval of values based on their keys.
   - **Array**: A simple list of objects where each object contains an `id` for identification. It is less efficient for lookups compared to a `Map`, especially as the size of the array increases.

### Test Cases

The benchmark includes two specific tests:

- **Array.findIndex**:
  - **Code**: `const id = rng(); const index = arr.findIndex((obj) => obj.id === id);`
  - **Description**: This test measures how quickly an `Array` can find the index of an object with a specific `id`. The `findIndex` method iterates over the array until it finds an element that matches the criteria, which can take linear time (O(n)) in the worst case.

- **Map.get**:
  - **Code**: `const id = rng(); const value = map.get(id);`
  - **Description**: This test measures how quickly a `Map` can retrieve a value associated with a given key. The `get` method performs lookups in constant time (O(1)), making it generally faster than searching through an array.

### Performance Results

The results of the benchmark show a significant difference between the two tests:

- **Map.get**: `34,235,816` executions per second.
- **Array.findIndex**: `5,426,556.5` executions per second.

### Pros and Cons of Each Approach

**Map**
- **Pros**:
  - Fast lookups (O(1)).
  - More efficient for large datasets when frequent key-based retrievals are required.
- **Cons**:
  - Slightly higher memory overhead compared to arrays, especially if the dataset is small.

**Array**
- **Pros**:
  - Simplicity of use and readability.
  - Offers methods like `map`, `filter`, and `reduce` that are beneficial for a variety of operations.
- **Cons**:
  - Poor performance for lookups if the array is large, since it requires traversing the array (O(n)).
  - Struggles with large datasets when frequent access or searches are needed.

### Other Considerations

- For applications where frequent lookups are essential, using a `Map` is usually the better option.
- If the dataset is small or operations are primarily about order or sequential access, an `Array` may suffice.

### Alternatives

Other alternatives to consider might include:

- **Object** for key-value storage: Simple but only uses strings and symbols as keys.
- **Set**: For storing unique values, with faster lookups than arrays but without key-value association.
- **WeakMap**: If you need a key-value store where keys can be garbage collected, it's more memory efficient if keys are not referenced elsewhere.

In conclusion, the benchmark effectively demonstrates the performance advantage of using `Map` over `Array` for certain operations, particularly those involving frequent key-based lookups. Each data structure has its ideal use case, and software engineers should choose based on the specific requirements of their application.

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

Comparing performance of: `Array.findIndex vs Map.get`

Created: one year ago by: Guest

Go to the latest result

Array.findIndex

Map.get

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

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

Comparing performance of: Array.findIndex vs Map.get

Created: one year ago by: Guest

Go to the latest result

Array.findIndex

Map.get

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `Array.findIndex vs Map.get`