Benchmark: new Map vs Array.from vs spread operator

Script Preparation code:

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

Tests:

new Map
new Map(arr.map(item => [item.id, item]));
Array.from
Array.from(map.values());
Spread Operator
[...map.values()]

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Spread Operator

28K/s

Array.from

26K/s

new Map

1K/s

Fastest: Spread Operator (25.3x faster)

View exact numbers

✓ Spread Operator: 27,788 ops/sec
• Array.from: 26,114 ops/sec
• new Map: 1,096 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
Array.from
Spread Operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Spread Operator

44K/s

Array.from

44K/s

new Map

2K/s

View exact numbers

Test name	Executions per second
✓ Spread Operator	44,084 Ops/sec
Array.from	43,764 Ops/sec
new Map	1,590 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 data and explain what is being tested.

**Benchmark Definition:**
The benchmark measures the performance difference between three approaches:

1. `new Map()` - Creating a new Map object from an array.
2. `Array.from()`, followed by `map()` on a new or existing Map object (i.e., getting values from a Map repeatedly).
3. The spread operator `[...map.values()]` - Using the spread operator to get values from a Map.

**Options Compared:**

* **New Map once and get array from it repeatedly**: This approach creates a new Map object, adds data to it, and then repeatedly gets an array of its values.
* **Create new Array once and get new Map repeatedly**: This approach creates a new array, adds data to it, and then repeatedly creates a new Map object from the array.
* **Spread Operator**: This approach uses the spread operator to directly get values from an existing or newly created Map object.

**Pros and Cons:**

1. **New Map once and get array from it repeatedly**:
	* Pros: Less overhead for getting data, as you're not creating a new array each time.
	* Cons: You need to create the initial array and populate it with data, which can be slower than other approaches.
2. **Create new Array once and get new Map repeatedly**:
	* Pros: Easier to manage the array creation process, as you only do it once.
	* Cons: Creates a new array each time you need data, which can lead to increased overhead.
3. **Spread Operator**:
	* Pros: Fastest approach, as it doesn't require any additional array or Map object creation.
	* Cons: Requires an existing or newly created Map object, and may not be suitable for all scenarios.

**Library and Special JS Features:**
The benchmark uses the `Map` data structure from JavaScript's built-in `Object` namespace. No special features are required to run this benchmark.

**Other Considerations:**

When designing such a benchmark, it's essential to consider factors like:

* Array creation overhead vs. iteration overhead
* Map object lookup efficiency for repeated get operations
* Cache performance and memory allocation

Keep in mind that these results might vary depending on the specific JavaScript engine, browser, or runtime environment being used.

**Alternatives:**

Other alternatives for comparing these approaches include:

* Using a different data structure, such as a Set or an Object, to store and retrieve data.
* Creating a custom data structure with optimized operations for getting values.
* Comparing performance using other methods, such as iteration vs. array indexing.

However, the spread operator approach remains one of the fastest ways to get values from a Map object in JavaScript.

new Map vs Array.from vs spread operator (version: 0)

What is faster creating new Map once and getting array from it repeatedly or create new Array once and get new Map repeatedly?

Comparing performance of: `new Map vs Array.from vs Spread Operator`

Created: 2 years ago by: Registered User

Go to the latest result

new Map

Array.from

Spread Operator

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 Array.from vs spread operator (version: 0)

What is faster creating new Map once and getting array from it repeatedly or create new Array once and get new Map repeatedly?

Comparing performance of: new Map vs Array.from vs Spread Operator

Created: 2 years ago by: Registered User

Go to the latest result

new Map

Array.from

Spread Operator

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 Array.from vs Spread Operator`