Benchmark: test Map vs Object with string which use string as key and value

Script Preparation code:

const map = new Map();
const obj = {};

function generateKeys(startIndex, endIndex) {
  const res = [];
  for (let i = startIndex; i < endIndex; i++) {
    res.push(btoa(i));
  }

  return res;
}

const kvs = generateKeys(0, 1000);
const newKvs = generateKeys(10000, 12000);

kvs.forEach(kv => {
  map.set(kv, kv);
  obj[kv] = kv;
});

Tests:

Map get
kvs.forEach(kv => { map.get(kv); });
Obj get
kvs.forEach(kv => { obj[kv]; });
Map set
kvs.forEach(kv => { map.set(kv, kv); });
Obj set
kvs.forEach(kv => { obj[kv] = kv; });

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Map get

532K/s

Obj get

117K/s

Obj set

95K/s

Map set

67K/s

Fastest: Map get (7.9x faster)

View exact numbers

✓ Map get: 531,689 ops/sec
• Obj get: 116,657 ops/sec
• Obj set: 95,026 ops/sec
• Map set: 67,222 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map get
Obj get
Map set
Obj set

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 138 on Linux

View result in a separate tab

Map get

77K/s

Obj get

15K/s

Obj set

13K/s

Map set

12K/s

View exact numbers

Test name	Executions per second
✓ Map get	76,536 Ops/sec
Obj get	15,131 Ops/sec
Obj set	12,513 Ops/sec
Map set	11,819 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net compares the performance of JavaScript Maps versus JavaScript Objects when using strings as keys and values. The benchmarks measure the efficiency of "get" and "set" operations for both data structures.

### Options Compared
1. **Map**
   - **Test Cases**:
     - `Map get`: Retrieving values using the `get()` method.
     - `Map set`: Storing values using the `set()` method.
2. **Object**
   - **Test Cases**:
     - `Obj get`: Accessing properties directly through the bracket notation.
     - `Obj set`: Assigning properties directly using bracket notation.

### Performance Results
From the benchmark results provided, there are observable execution speeds for each operation (measured in executions per second):

- **Map get**: 281,959.72
- **Obj get**: 82,334.77
- **Obj set**: 68,567.32
- **Map set**: 46,790.65

### Pros and Cons

#### Map
**Pros**:
- Maps have better performance for the `get` operation compared to objects, as seen in the results. This is particularly advantageous when frequent retrievals are required.
- Maps also maintain the order of entries, which can be crucial for certain use cases where the order of keys matters.
- Maps accept any value (objects, functions, etc.) as keys, not just strings or symbols.

**Cons**:
- Set and retrieval speeds for Maps are generally slower than Objects when it comes to the `set` operation in this benchmark.
- Maps can be more memory-intensive due to their more complex internal structure.

#### Object
**Pros**:
- The direct access of properties via bracket notation is faster than Map set in this benchmark.
- They are simple to use and have been part of JavaScript for a long time, making them widely understood and supported.
- Objects use less memory compared to Maps.

**Cons**:
- Objects do not maintain order and may lead to inconsistent key ordering.
- The restriction of using only strings and symbols as keys limits flexibility in certain scenarios where a variety of types may be required.

### Other Considerations
- **Use Case Suitability**: If key order matters or if non-string keys are used frequently, Maps are preferable. For scenarios where key values are limited to strings and performance in sets is more critical, Objects might be a better choice.
- **Memory Considerations**: While performance is a crucial metric, also take into account the memory usage based on the expected dataset size and structure.

### Alternatives
1. **WeakMap**: Similar to Map, but with keys that are weakly referenced, meaning they can be garbage collected. This is useful for caching without preventing memory cleanup.
2. **Set/WeakSet**: If the use case involves storing unique values and ensuring no duplicates, Set may be preferable over both Map and Object.
3. **Plain Objects**: In scenarios primarily dealing with JSON-like structures without needing advanced features of Maps, plain objects can suffice.

In conclusion, this benchmark provides significant insights into the performance trade-offs between Maps and Objects in JavaScript for specific operations. Understanding these nuances enables software engineers to make optimized choices based on their application's needs.

test Map vs Object with string which use string as key and value (version: 1)

Comparing performance of: `Map get vs Obj get vs Map set vs Obj set`

Created: one year ago by: Guest

Go to the latest result

Map get

Obj get

Map set

Obj set

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

test Map vs Object with string which use string as key and value (version: 1)

Comparing performance of: Map get vs Obj get vs Map set vs Obj set

Created: one year ago by: Guest

Go to the latest result

Map get

Obj get

Map set

Obj set

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Map get vs Obj get vs Map set vs Obj set`