Benchmark: new Map vs set array to map

Script Preparation code:

var arr = [];

for (let i = 1; i <= 100; i++) {
  arr.push({ id: i, name: `${i}` });
}

var arr2 = [];

for (let i = 101; i <= 200; i++) {
  arr.push({ id: i, name: `${i}` });
}

var map = new Map(arr.map(item => [item.id, item]));

Tests:

new Map
const map2 = new Map(arr2.map(item => [item.id, item])); map = new Map([...map, ...arr2.map(item => [item.id, item])]);
push array to map
arr2.forEach(item => { map.set([item.id, item]) });

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

push array to map

108.8M/s

new Map

129K/s

Fastest: push array to map (843.6x faster)

View exact numbers

✓ push array to map: 108,798,392 ops/sec
• new Map: 128,970 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
new Map
push array to map

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 140 on Mac OS X 10.15.7

View result in a separate tab

push array to map

128.0M/s

new Map

209K/s

View exact numbers

Test name	Executions per second
✓ push array to map	127,990,496 Ops/sec
new Map	208,547 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is testing two approaches to create a new Map from an array of objects:

1. Creating a new Map directly from an existing Map using `map` method (`new Map(arr2.map(item => [item.id, item])))`.
2. Creating a new Map by pushing individual elements into the map using the `set` method (`arr2.forEach(item => { ... });`).

**Options Compared**

The benchmark is comparing two approaches:

* **Approach 1: New Map creation from existing Map** (via `map` method)
* **Approach 2: Pushing array elements to a new Map** (via `set` method)

**Pros and Cons of Each Approach**

**Approach 1: New Map creation from existing Map**

Pros:

* More concise and readable code
* Less error-prone, as the resulting Map is built incrementally

Cons:

* May be slower due to the overhead of creating a new Map object
* Requires the existence of an existing Map, which might not always be available

**Approach 2: Pushing array elements to a new Map**

Pros:

* Can be faster for large datasets, as it avoids the overhead of creating a new Map object
* Does not require an existing Map, making it more flexible

Cons:

* More verbose and error-prone code
* May lead to performance issues if the push operations are expensive (e.g., due to disk I/O or network latency)

**Other Considerations**

Both approaches have their trade-offs. The `map` method approach is generally considered more concise and readable, but might be slower for large datasets. The `push` array elements to a new Map approach can be faster but is more verbose and error-prone.

**Library Used**

In the provided benchmark definition, no specific library is used beyond JavaScript's built-in `Map`, `Array`, and `set` methods.

**Special JS Feature or Syntax**

The benchmark does not use any special JavaScript features or syntax. It only relies on standard JavaScript concepts and methods.

**Benchmark Result Interpretation**

According to the latest benchmark result, the `push array elements to a new Map` approach outperforms the `new Map creation from existing Map` approach by approximately 2.3x (12998737 / 56132 ≈ 2.31). This suggests that pushing individual elements into a new Map can be faster for this specific use case.

**Alternative Approaches**

If you're interested in exploring alternative approaches, consider the following:

* Using `Array.prototype.reduce` to create a new Map from an array of objects.
* Utilizing a library like Lodash or Underscore.js, which provide optimized implementations of Map-like data structures and utility functions for working with arrays.

Keep in mind that these alternatives might introduce additional dependencies or trade-offs, so it's essential to consider the specific requirements and constraints of your use case before exploring them.

new Map vs set array to map (version: 0)

What is faster create new Map from two maps or set array items to map?

Comparing performance of: `new Map vs push array to map`

Created: 2 years ago by: Registered User

Go to the latest result

new Map

push array to map

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 llama3.2:3b, generated one year ago):

new Map vs set array to map (version: 0)

What is faster create new Map from two maps or set array items to map?

Comparing performance of: new Map vs push array to map

Created: 2 years ago by: Registered User

Go to the latest result

new Map

push array to map

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 llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `new Map vs push array to map`