Benchmark: {} vs Map Creation

HTML Preparation code:

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

Tests:

Creation: Object
const n1 = []; for (let i1 = 0; i1 < 10000; i1++) { n1.push({}); }
Creation: Map
const n2 = []; for (let i2 = 0; i2 < 10000; i2++) { n2.push(new Map()); }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Creation: Object

16K/s

Creation: Map

9K/s

Fastest: Creation: Object (1.8x faster)

View exact numbers

✓ Creation: Object: 15,731 ops/sec
• Creation: Map: 8,825 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
Creation: Object
Creation: Map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Windows

View result in a separate tab

Creation: Object

17K/s

Creation: Map

9K/s

View exact numbers

Test name	Executions per second
✓ Creation: Object	16,607 Ops/sec
Creation: Map	8,888 Ops/sec

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

LLMs can make mistakes. Check important info.

In this benchmark, we compare two methods of creating collections in JavaScript: creating plain objects versus creating instances of the `Map` object. Each method has its context, advantages, and disadvantages, which can impact performance and ease of use based on the specific requirements of a project.

### Test Cases Overview

1. **Creation: Object**
   - **Benchmark Code**: 
     ```javascript
     const n = [];
     for (let i = 0; i < 10000; i++) {
         n.push({});
     }
     ```
   - **Description**: This test case measures the performance of creating 10,000 plain JavaScript objects and pushing them into an array.

2. **Creation: Map**
   - **Benchmark Code**: 
     ```javascript
     const n = [];
     for (let i = 0; i < 10000; i++) {
         n.push(new Map());
     }
     ```
   - **Description**: This test case measures the performance of creating 10,000 instances of the `Map` object and pushing them into an array.

### Performance Results

Based on the latest benchmark results:
- **Creation: Object**
  - **Executions Per Second**: 21,197.77
- **Creation: Map**
  - **Executions Per Second**: 4,676.49

From the results, we can see that creating plain objects is significantly faster than creating instances of `Map` in this specific scenario.

### Pros and Cons

#### Plain Objects
- **Pros**:
  - **Performance**: As illustrated, creating objects is more performant; they are lightweight and have less overhead compared to `Map`.
  - **Simplicity**: They are straightforward to use for generic key-value pair storage when you don't need advanced features.
  
- **Cons**:
  - **Limited Features**: Objects do not maintain the order of keys, and keys can only be strings (or symbols), which limits their flexibility.
  - **Prototype Inheritance**: If not handled properly, they can carry inherited properties from their prototype chain, which can lead to unexpected behavior.

#### Maps
- **Pros**:
  - **Key Flexibility**: Supports both objects and primitive values as keys, which can be beneficial in certain use cases.
  - **Order of Entries**: Maps maintain the order of their elements, which is useful when order matters.
  - **Built-in Methods**: Offers methods like `set`, `get`, and `delete`, which make operations on collections more versatile.

- **Cons**:
  - **Performance**: As the benchmark shows, the creation of `Map` instances is slower than creating objects.
  - **Memory Overhead**: `Map` instances generally use more memory than plain objects due to their additional features.

### Other Alternatives
- **Arrays**: In some situations, using an array of tuples (or arrays with two elements) can replicate the functionality of objects or Maps while maintaining order. However, this approach has its own pros and cons regarding access speed and clarity.
  
- **WeakMap/WeakSet**: If it’s necessary to manage memory more effectively, particularly with large collections that won't be needed again, options like `WeakMap` or `WeakSet` can be considered. These can automatically clean up when there are no more references to their keys.

### Conclusion
In conclusion, this benchmark provides valuable insights into the performance implications of using plain objects versus `Map` for collection creation in JavaScript. While developers may lean towards `Map` for its features and capabilities, when performance is critical (e.g., creating many instances), plain objects might be the better choice. Understanding the characteristics of each can help developers make informed decisions based on their specific use cases and requirements.

{} vs Map Creation (version: 4)

Comparing performance of: `Creation: Object vs Creation: Map`

Created: one year ago by: Registered User

Go to the latest result

Creation: Object

Creation: Map

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

{} vs Map Creation (version: 4)

Comparing performance of: Creation: Object vs Creation: Map

Created: one year ago by: Registered User

Go to the latest result

Creation: Object

Creation: Map

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 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: `Creation: Object vs Creation: Map`