Benchmark: Map vs Object vs Array @adelinolsn Create v3

Script Preparation code:

var quantityOfElements = 100000000;
var array = new Array(quantityOfElements);
var quantityOfTests = 10000;

for (let i = 0; i < quantityOfElements; i++) {
    array[i] = {
        id: i
    };
}

Tests:

Map create
let map = new Map(); for (let i = 0; i < quantityOfElements; i++) { map.set(array[i].id, array[i]); }
Object create
let obj = {}; for (let i = 0; i < quantityOfElements; i++) { obj[array[i].id] = array[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map create
Object create

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its test cases to explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The MeasureThat.net benchmark measures the performance difference between creating objects using an array (`Array`) versus an object (`Object`).

**Script Preparation Code**

The script preparation code creates a large array `array` with 100 million elements, each containing a single property `id`. This array will be used to create objects in the test cases.

```javascript
var quantityOfElements = 100000000;
var array = new Array(quantityOfElements);
for (let i = 0; i < quantityOfElements; i++) {
    array[i] = { id: i };
}
```

**Html Preparation Code**

There is no HTML preparation code provided.

**Test Cases**

The benchmark consists of two test cases:

1. **Map create**: This test case creates a new `Map` object and sets elements from the `array` to the map using the `set()` method.
```javascript
let map = new Map();
for (let i = 0; i < quantityOfElements; i++) {
    map.set(array[i].id, array[i]);
}
```

2. **Object create**: This test case creates a new object and sets elements from the `array` to the object using the syntax `obj[array[i].id] = array[i];`.
```javascript
let obj = {};
for (let i = 0; i < quantityOfElements; i++) {
    obj[array[i].id] = array[i];
}
```

**What's being tested?**

The benchmark tests the performance difference between creating objects using a `Map` versus an object literal (`Object`). The test focuses on the time it takes to create these objects and set elements from the same array.

**Comparison of Map, Object, and Array**

*   **Performance**: Creating objects using an array is generally faster than creating objects using a map or object literal.
    *   **Array**: Creating an array and then setting its elements can be efficient because arrays are optimized for storing multiple values. This approach tends to produce better performance results due to its simplicity and direct memory allocation.
    *   **Map**: Creating a new `Map` object and setting elements using the `set()` method requires more overhead than directly creating objects, as it involves additional operations like checking if keys already exist in the map.
    *   **Object literal (Object)**: This approach involves creating an empty object and then setting its properties. It can be less efficient than using arrays because it doesn't take advantage of array's optimized memory allocation for multiple values.

**Pros and Cons**

*   **Array**: Pros - Simple, fast, takes advantage of array optimizations; Cons - May not fit all use cases (like storing arbitrary key-value pairs).
*   **Map**: Pros - Suitable for storing arbitrary key-value pairs; Cons - Generally slower than using arrays due to additional operations like checking if keys already exist.
*   **Object literal (Object)**: Pros - Flexible and suitable for most object-oriented programming scenarios; Cons - May be less efficient than using arrays.

**Special JS feature/Syntax**

None mentioned in the benchmark, but keep in mind that certain JavaScript features or syntax might affect performance differently depending on the specific implementation. However, since this example doesn't involve any such features, we can focus solely on array vs object literal performance.

**Other Alternatives**

*   **Using a library like Lodash**: Libraries like Lodash provide functions for creating objects and handling maps that could potentially offer different performance characteristics compared to vanilla JavaScript implementations.
*   **Multimethod calls (async/await)**: This approach might change the execution order and timing due to its nature, however it's not being used in this benchmark.

For most modern browsers, the array-based approach tends to perform better than both map and object literal approaches. However, performance differences may vary depending on the specific use case, the size of the data set, and the underlying hardware and software configurations.

Latest run results:

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

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

Browser/OS: Firefox 127 on Linux

View result in a separate tab

Test name	Executions per second
Map create	0.0 Ops/sec
Object create	0.7 Ops/sec

Related benchmarks:

Map vs Object vs Array @adelinolsn Create v3 (version: 0)

Comparing performance of: Map create vs Object create

Created: 4 months ago by: Registered User

Jump to the latest result

Map create

Object create

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):