Benchmark: {} vs Map with set and UPDATE 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
for (let i1 = 0; i1 < 10000; i1++) { d1[i1] = i1 * 2; }
Creation: Map
for (let i2 = 0; i2 < 10000; i2++) { d2.set(i2, i2 * 2); }

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	65097.8 Ops/sec
Creation: Map	3359.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined here is designed to test the performance of two different data structures in JavaScript: a regular JavaScript object (`{}`) and a `Map` object. Specifically, it compares the performance of setting values in both data structures.

### Options Compared

1. **JavaScript Object (`{}`)**:
   - **Benchmark Definition**: `for (let i1 = 0; i1 < 10000; i1++) { d1[i1] = i1 * 2; }`
   - **Test Name**: "Creation: Object"
   - **Description**: In this part of the benchmark, a JavaScript object (`d1`) is populated with keys from 0 to 9999, and the corresponding values are twice those keys.

2. **Map**:
   - **Benchmark Definition**: `for (let i2 = 0; i2 < 10000; i2++) { d2.set(i2, i2 * 2; }`
   - **Test Name**: "Creation: Map"
   - **Description**: In this case, a `Map` object (`d2`) is being used. The same keys from 0 to 9999 are set, with values that are twice those keys.

### Performance Results

- **Creation: Object**: Executions per second: **65,097.82**
- **Creation: Map**: Executions per second: **3,359.64**

### Pros and Cons of Each Approach

1. **JavaScript Object**:
   - **Pros**:
     - Generally faster for simple CRUD (Create, Read, Update, Delete) operations, as seen in the benchmark results.
     - Direct access to properties makes it appealing for basic key-value pairs.
     - Uses less memory compared to a `Map` for simple key-value storage.

- **Cons**:
     - Objects are limited by their keys, which must be strings or symbols. This can lead to issues if using non-string keys is required.
     - Objects do not maintain the order of properties, particularly in older JavaScript engines (though modern engines generally do for string keys).

2. **Map**:
   - **Pros**:
     - Can have keys of any type, including objects, functions, and primitive types.
     - Maintains insertion order, which can be beneficial for certain applications.
     - Provides built-in methods such as `.set()`, `.get()`, and `.delete()` that can make the code cleaner.

- **Cons**:
     - Generally slower for operations compared to plain objects, especially visible in the test results.
     - Higher memory overhead due to the additional structural capabilities of a `Map`.

### Other Considerations

When deciding between using an object or a `Map` in JavaScript, developers should take into account the specific requirements of their application:

- **Use cases**: If you only need string keys and are focused on performance, objects may be the best choice. If you need more versatile keys, or require ordered entries, then `Map` is preferable despite the performance trade-off.
- **Iterability**: Maps are iterable, which can simplify code when needing to loop over entries.
- **API**: The method calls for `Map` provide a more explicit and declarative way to work with key-value pairs.

### Alternatives

Other alternatives to consider beyond objects and maps include:

- **Sets**: For storing unique values, where an array-like structure is not sufficient.
- **WeakMap**: Similar to `Map`, but the keys must be objects, and the entries are weakly referenced, allowing for garbage collection.
- **WeakSet**: Similar to `Set`, but allows only objects as values, and also weakly references them.

In summary, the benchmark provides a clear insight into the performance of basic data structure manipulations in JavaScript, highlighting key differences between objects and `Map`, guiding developers in their choice of data structures based on their specific needs and performance considerations.

Related benchmarks:

{} vs Map with set and UPDATE 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):