Benchmark: {} vs Map with set and GET value

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const d1 = {};

for (let i = 0; i < 10000; i++) {
  	d1[i] = i;
}

const d2 = new Map();

for (let i = 0; i < 10000; i++) {
  	d2.set(i, i);
}

Tests:

Creation: Object
let v; for (let i1 = 0; i1 < 10000; i1++) { v = d1[i1]; }
Creation: Map
let v; for (let i2 = 0; i2 < 10000; i2++) { v = d2.get(i2); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Creation: Object
Creation: Map

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; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
Creation: Object	115147.3 Ops/sec
Creation: Map	152377.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark compares the performance of accessing values from two different data structures in JavaScript: a plain object (`{}`) and a `Map`. The benchmark specifically tests how quickly values can be retrieved from these data structures after they've been populated with a set of integers from 0 to 9999.

### Options Compared
1. **Plain Object (`{}`)**:
   - **Test Name**: Creation: Object
   - **Benchmark Definition**: In the benchmark, a loop accesses values from a plain JavaScript object. The values are retrieved using bracket notation (`d1[i1]`), where `d1` is the plain object initialized with key-value pairs.

2. **Map (`Map`)**:
   - **Test Name**: Creation: Map
   - **Benchmark Definition**: Similarly, another loop accesses values from a `Map` object. The values are retrieved using the `get` method (`d2.get(i2)`), which is specifically designed for the `Map` data structure.

### Pros and Cons

#### Plain Object:
- **Pros**:
  - Simpler syntax and can be easier to use for basic key-value pairs.
  - Since objects are optimized for property access, in many scenarios, accessing values can be quite fast.
  - Lightweight and uses less memory per entry compared to a `Map`.

- **Cons**:
  - Key types are limited to strings and symbols only; numbers will be converted to strings.
  - The order of properties is not guaranteed (though modern JavaScript engines do tend to keep the insertion order for string keys).
  - Inherit properties from `Object.prototype` unless specifically created with null as prototype.

#### Map:
- **Pros**:
  - Can use any data type as a key (including objects, functions, and primitive types).
  - Preserves the insertion order of entries, making it predictable when iterating.
  - More efficient for large datasets when frequently adding or removing key-value pairs.
  
- **Cons**:
  - Slightly more overhead in terms of memory compared to plain objects.
  - Somewhat more complex syntax due to the usage of specific methods like `set()` and `get()`.

### Other Considerations
- In scenarios involving large amounts of data or frequently changing datasets, `Map` can often outperform plain objects due to its better performance characteristics when it comes to dynamic additions or deletions.
- For static lookups or scenarios where keys are always strings, plain objects may suffice and provide better performance.
- The decision between using a plain object or a `Map` will often depend on the specific requirements of the application, such as performance needs, complexity, and the types of keys used.

### Alternatives
- **WeakMap**: A similar data structure that allows for key-value pairs, but it only holds weak references to the keys, which are collected by garbage collection when there are no other references to them. Useful when you want keys to be garbage collected.
- **Set**: If you need to store unique values without any associated keys, a `Set` may be appropriate.
- **Plain Arrays**: If the data can be indexed by contiguous integers and does not require the key-value lookup semantics, standard arrays may be a simpler solution.

Ultimately, the choice of data storage in JavaScript should be based on the requirements of the project, considering both performance metrics and ease of use for data manipulation.

Related benchmarks:

{} vs Map with set and GET value (version: 1)

Comparing performance of: Creation: Object vs Creation: Map

Created: one year ago by: Registered User

Jump to the latest result

Creation: Object

Creation: Map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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