Benchmark: Map creation in JS

Script Preparation code:

function generateAnArray(gvv) {
    let arr = [];
    for(let i = 0; i < 100; i++) {
        arr.push([i + '', {
            id: i,
            value: `value${i}`
        }]);
    }
    return arr;
}

bar = generateAnArray();

Tests:

arry first
function generateArray() { let arr = []; for(let i = 0; i < 100; i++) { arr.push([i + '', { id: i, value: `value${i}` }]); } return arr; } const foo = new Map(generateArray());
add to map
bar.reduce((arr, rr) => arr.set(rr[0], rr), new Map())

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arry first
add to map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

add to map

436K/s

arry first

259K/s

View exact numbers

Test name	Executions per second
✓ add to map	436,094 Ops/sec
arry first	258,646 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmarking data.

**What is being tested?**

The benchmark measures how fast different approaches can create and populate a JavaScript `Map` object, which is essentially an unordered collection of key-value pairs.

**Options compared:**

There are two test cases:

1. **"arry first"**: This approach uses the `generateArray()` function to generate an array of arrays, where each inner array has an `id` and a `value`. The resulting array is then passed directly to the `Map` constructor using the spread operator (`const foo = new Map(generateArray());`). This approach creates the map without explicitly setting any values.
2. **"add to map"**: In this approach, the `reduce()` method is used to iterate over the generated array and set each value in a separate call to `set()`, like this: `bar.reduce((arr, rr) => arr.set(rr[0], rr), new Map())`. This approach explicitly sets each value in the map.

**Pros and Cons of each approach:**

1. **"arry first"**: This approach is simple and easy to understand.
	* Pros:
		+ Fast (since it doesn't require explicit `set()` calls)
		+ Efficient memory usage
	* Cons:
		+ May not be as readable or maintainable for complex use cases
2. **"add to map"**: This approach provides more control over the mapping process, which can be beneficial in certain scenarios.
	* Pros:
		+ More explicit and controllable mapping logic
		+ Can be useful for edge cases or custom logic
	* Cons:
		+ Slower (due to the need for multiple `set()` calls)
		+ May incur additional memory overhead due to unnecessary value copies

**Other considerations:**

When working with `Map` objects in JavaScript, it's essential to consider factors such as:

* **Memory allocation**: Creating a new map can allocate significant memory, depending on the number of key-value pairs.
* **Garbage collection**: If the map is not properly cleaned up, it may lead to unnecessary garbage collection overhead.

**Library/Library purpose:**

None of the provided benchmarking code uses any external libraries. However, if we were to extend this example with additional libraries or modules, we might consider using a library like `lodash` (specifically its `mapValues()` function) to simplify map creation and iteration:

```javascript
const _ = require('lodash');
// ...

bar = new Map(_.map(generateArray(), rr => ({ id: rr[0], value: rr[1] })));
```

**Special JS feature/Syntax:**

There is no explicit use of any special JavaScript features or syntax in the provided code.

In summary, this benchmark measures how fast two different approaches can create and populate a JavaScript `Map` object. The "arry first" approach provides a simple, efficient solution but might lack readability for complex use cases, while the "add to map" approach offers more control over mapping logic but incurs additional overhead due to multiple `set()` calls.

Map creation in JS (version: 0)

Comparing performance of: `arry first vs add to map`

Created: 2 years ago by: Guest

Go to the latest result

arry first

add to map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Map creation in JS (version: 0)

Comparing performance of: arry first vs add to map

Created: 2 years ago by: Guest

Go to the latest result

arry first

add to map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `arry first vs add to map`