Benchmark: js Map get VS Obj[key]

HTML Preparation code:


<div id=''></div>

Script Preparation code:

var i = 0,
    count = 1000,
    a;
var map = new Map();
var obj = {};
for (i = 0; i < count; i++) {
    obj[i] = i * i;
    map.set(i, i * i);
}


console.log('map/obj:: ', {
    map,
    obj
});

Tests:

Map
for (i = 0; i < count; i++) { map.get(i); }
Obj
for (i = 0; i < count; i++) { obj[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
Obj

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Map	21686.4 Ops/sec
Obj	38807.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 11 months ago):

LLMs can make mistakes. Check important info.

The benchmark you're reviewing compares two methods of data retrieval in JavaScript: using a `Map` object versus a plain JavaScript object (object literal) to access stored values. The comparison aims to analyze performance in terms of execution speed while retrieving values associated with keys.

### Options Compared:

1. **Retrieving values using Map (`map.get(i)`)**:
    - This method utilizes the JavaScript `Map` object, which is a collection of keyed data items, similar to objects, but with some important differences.
    
2. **Retrieving values using Object (`obj[i]`)**:
    - This method uses a plain JavaScript object to store key-value pairs, directly accessing properties by their keys.

### Pros and Cons:

#### Using `Map`:
**Pros**:
- **Key Types**: A `Map` can use objects, functions, and any primitive type as keys, while objects can only use strings and symbols for keys.
- **Order of Elements**: `Map` preserves the insertion order of keys, which can be beneficial when the order of entries matters.
- **Methods**: It provides built-in methods like `.set()`, `.get()`, and `.delete()` for easy manipulation of entries.

**Cons**:
- **Performance**: In some scenarios, particularly for simple key-value retrievals, `Map` can be slower than objects due to its additional features and internal mechanisms.
- **Memory Overhead**: `Map` can use more memory compared to plain objects since it maintains additional information such as order and key type data.

#### Using Object:
**Pros**:
- **Performance**: Direct property access (using `obj[i]`) is often faster than methods of `Map`, particularly for simple cases of key-value retrieval.
- **Simplicity**: Objects can be simpler and lightweight in cases where only string keys are needed.

**Cons**:
- **Key limitations**: Objects can only use strings/symbols as keys, which can be limiting for more complex data structures.
- **No methods for manipulation**: Objects do not have methods like `.get()` or `.set()` which can make certain operations less intuitive to perform.

### Benchmark Setup:
The initial part of the JSON sets up the benchmark by creating a `Map` and a plain object with 1,000 key-value pairs, where keys are integers (0 to 999) and values are the squares of those keys. This setup allows for a fair comparison of retrieval time for both methods under similar conditions.

### Benchmark Results Overview:
Based on the benchmark results provided:
- **Object Retrieval**: The retrieval using the object (`obj[i]`) achieved **38,807.71 executions per second**.
- **Map Retrieval**: The retrieval using the `Map` (`map.get(i)`) achieved **21,686.41 executions per second**.

From these results, it is clear that accessing values from a plain object is significantly faster than accessing them from a `Map` in this scenario.

### Other Considerations:
While this benchmark focuses specifically on retrieval performance, there are other aspects to consider when deciding between `Map` and object:
- **Use Case**: If the application requires frequent addition and removal of key-value pairs or involves complex key types, `Map` might be more suitable despite its slower retrieval times.
- **Browser Compatibility**: Both `Map` and objects are widely supported in modern browsers; however, some very old browsers may not support `Map`.

In conclusion, this benchmark serves as a quick reference for performance differences between two commonly used structures in JavaScript and illustrates the trade-offs between flexibility and performance in key-value storage.

Related benchmarks:

js Map get VS Obj[key] (version: 1)

js Map get VS Obj[key]

Comparing performance of: Map vs Obj

Created: 11 months ago by: Guest

Jump to the latest result

Map

Obj

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 11 months ago):