Benchmark: Map vs Object - Insertion, Lookup, Update & Deletion

Script Preparation code:

const map = new Map();
const obj = {};

const baseKey = '00000000000000000000';

const getKey = (index) => {
  let key = baseKey;

  const chars = [...index.toString()];
  for (let i = 0; i < chars.length; i++) {
    key[i] = chars[i];
  }

  return key;
};

Tests:

Map
// 1: insert, lookup & update for (let i = 0; i < 100000; i++) { const key = getKey(i); map.set(key, 'value'); const _ = map.get(key); map.set(key, 'newValue'); } // 2: delete all keys for (let i = 0; i < 100000; i++) { const key = getKey(i); map.delete(key); } // 3: insert, lookup & update again for (let i = 0; i < 100000; i++) { const key = getKey(i); map.set(key, 'value'); const _ = map.get(key); map.set(key, 'newValue'); }
Object
// 1: insert, lookup & update for (let i = 0; i < 100000; i++) { const key = getKey(i); obj[key] = 'value'; const _ = obj[key]; obj[key] = 'newValue'; } // 2: delete all keys for (let i = 0; i < 100000; i++) { const key = getKey(i); delete obj[key]; } // 3: insert, lookup & update again for (let i = 0; i < 100000; i++) { const key = getKey(i); obj[key] = 'value'; const _ = obj[key]; obj[key] = 'newValue'; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
Object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Linux

View result in a separate tab

Test name	Executions per second
Map	1.3 Ops/sec
Object	1.3 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described compares the performance of JavaScript `Map` and `Object` data structures in terms of their insertion, lookup, update, and deletion operations. The benchmark aims to evaluate how these two structures perform under similar conditions—specifically with keys of fixed length (20) and a number of operations performed (100,000 times).

### Key Comparisons
1. **Insertion**: 
   - **Map**: Insertion in a `Map` is typically straightforward, and it uses keys of any type, including objects, whereas `Objects` can only use strings and symbols as keys.
   - **Object**: Insertion into an `Object` is simple as well, but it may be less optimized for dynamic key additions compared to `Map`.

2. **Lookup**:
   - **Map**: The `get` method fetches values by their keys directly, generally allowing for faster lookups due to the inherent structure that `Map` uses.
   - **Object**: Retrieving a value from an `Object` uses a similar syntax but may involve prototype chain lookups, potentially causing slower performance in certain cases.

3. **Update**:
   - **Map**: Updating values is done using the same `set` method and appears to be optimized for frequent updates and complex data types.
   - **Object**: Updating involves simple key-value assignments but can lead to performance issues if the prototype chain needs to be traversed.

4. **Deletion**:
   - **Map**: The `delete` method is designed explicitly for this purpose in `Map`, which may offer performance benefits when the number of deletions is high.
   - **Object**: Deleting a property from an `Object` using the `delete` operator can result in performance penalties, particularly on hotspots, as it may change the internal structure of the `Object`.

### Pros and Cons
**Map**:
- **Pros**:
  - Keys can be of any type.
  - Optimized for frequent additions and removals.
  - Maintains the order of keys, which can be beneficial in certain applications.
- **Cons**:
  - Slightly more memory overhead compared to plain objects.
  
**Object**:
- **Pros**:
  - Offers a simpler model for developers familiar with traditional data structures.
  - Lightweight for static key/value pairs and less overhead.
- **Cons**:
  - Limited to string keys (unless you explicitly use Symbols).
  - May exhibit slower performance for frequent additions/deletions due to internal optimizations.

### Other Considerations
- **Ordering**: `Map` maintains order of entries as they are added, while `Object` does not guarantee order when keys are strings (though ordering behavior has been specified in ECMAScript since ES2015).
- **Iteration**: Iterating over a `Map` is generally straightforward and optimized with `forEach` or `for...of` loops, whereas iterating over an `Object` typically uses `for...in` or `Object.keys()` and `Object.values()`, which may have performance differences.

### Alternative Data Structures
- **WeakMap**: Similar to `Map`, but keys can only be objects, and they are garbage-collectible when there are no other references.
- **Set**: If unique keys are your requirement without needing values, this could be an alternative.
- **Plain Arrays**: For ordered collections where insertion might not need a keyed structure.

In conclusion, the benchmark effectively identifies performance differences between `Map` and `Object` in JavaScript for common operations, helping engineers choose the right data structure based on their specific use cases.

Related benchmarks:

Map vs Object - Insertion, Lookup, Update & Deletion (version: 1)

Insertion, Lookup, Update & Deletion of Map vs Object. Keys length: 20. Loop length: 100000.

Comparing performance of: Map vs Object

Created: 11 months ago by: Guest

Jump to the latest result

Map

Object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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