Benchmark: {} vs Map with set and DELETE

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++) { delete d1[i1]; }
Creation: Map
for (let i2 = 0; i2 < 10000; i2++) { d2.delete(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: 2 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Android

View result in a separate tab

Test name	Executions per second
Creation: Object	1693.2 Ops/sec
Creation: Map	8372.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests performance differences between using a plain JavaScript object (`{}`) and a JavaScript `Map` in terms of deletion operations. Below is an explanation of what is being tested, the approaches involved, their pros and cons, along with consideration of libraries and alternative solutions.

### Benchmark Overview

**Objective**: 
The benchmark aims to compare the deletion performance of elements from two data structures: a standard JavaScript object and a `Map`.

### Test Cases

1. **Object Deletion**:
   ```javascript
   for (let i1 = 0; i1 < 10000; i1++) {
     delete d1[i1];
   }
   ```
   - **Test Name**: Creation: Object
   - **Functionality**: This loop deletes properties from a plain JavaScript object `d1`.

2. **Map Deletion**:
   ```javascript
   for (let i2 = 0; i2 < 10000; i2++) {
     d2.delete(i2);
   }
   ```
   - **Test Name**: Creation: Map
   - **Functionality**: This loop deletes entries from a `Map` object `d2`.

### Results Interpretation

The benchmark results indicate that the deletion operation from the `Map` is significantly faster than from the plain JavaScript object. The following execution speeds were recorded:

- **Map Deletion**: 20,753 executions per second
- **Object Deletion**: 3,371 executions per second

### Pros and Cons

#### Plain Object (`{}`):
- **Pros**:
  - Simplicity: Using a plain object is straightforward and familiar for many developers.
  - Lower memory overhead for small numbers of properties.

- **Cons**:
  - Slower performance on deletion operations, especially when the number of properties increases.
  - Not suitable for non-string keys (e.g., objects or functions).
  - Inherits properties from `Object.prototype`, potentially causing issues with property name collisions unless checked.

#### `Map`:
- **Pros**:
  - Faster performance on addition and deletion due to optimized internal mechanisms.
  - Supports any data type as keys (not just strings).
  - Maintains the order of elements, which can be beneficial in certain use cases.

- **Cons**:
  - Slightly more memory overhead than plain objects for small sets of data.
  - More complexity in operations if the data structure is relatively simple.

### Other Considerations

- **Use Cases**: When you need a simple key-value storage without high performance needs, objects are sufficient. However, if you require frequent additions and deletions, or need to use non-string keys, `Map` is the better choice.
  
- **Alternatives**: Other alternatives include:
  - **Sets**: For storing unique values without duplicates, although they do not directly offer key-value pairs like objects or maps.
  - **WeakMap**: Similar to `Map`, but entries can be garbage collected if there are no other references to the keys, useful for memory management.
  - **Libraries**: While this benchmark doesn’t test external libraries, libraries like Immutable.js or Lodash can provide structures that may optimize performance for specific use cases, particularly immutable data handling.

### Conclusion

This benchmark effectively illustrates the performance differences in deletion between JavaScript objects and maps. It highlights the scenarios in which each structure can be most effective and guides developers in selecting the right data structure for optimal performance depending on their specific use cases.

Related benchmarks:

{} vs Map with set and DELETE (version: 2)

Comparing performance of: Creation: Object vs Creation: Map

Created: one month ago by: Registered User

Jump to the latest result

Creation: Object

Creation: Map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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