Benchmark: Map.values().toArray() vs Array.from(Map.values()) vs [...Map.values()]

Script Preparation code:

const array = Array.from({length: 10_000}, () => Math.floor(Math.random() * 10_000_000));
const map = new Map();
array.forEach((x, i) => map.set(x, i));

Tests:

Map.values().toArray()
return map.values().toArray();
Array.from(Map.values())
return Array.from(map.values());
[...Map.values()]
return [...map.values()];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map.values().toArray()
Array.from(Map.values())
[...Map.values()]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Map.values().toArray()	12876.7 Ops/sec
Array.from(Map.values())	12214.0 Ops/sec
[...Map.values()]	12586.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark tests three different methods for converting the values of a `Map` object to an array in JavaScript. The objective is to compare their performance, particularly focusing on execution speed, as measured in executions per second. Here’s a detailed breakdown of the comparison:

### Options Compared

1. **`Map.values().toArray()`**
   - **Description**: This method attempts to call a hypothetical `toArray()` function directly on the iterator returned by `Map.values()`. However, `toArray()` is not a native method in the JavaScript language for iterators.
   - **Pros**: Theoretically, this syntax could be cleaner if a `toArray()` method existed, allowing for method chaining.
   - **Cons**: Since `toArray()` does not exist on the `Map.values()` iterator, this will likely result in a runtime error. Therefore, this option effectively tests the invalidity of using a non-existent method.

2. **`Array.from(Map.values())`**
   - **Description**: This method leverages the `Array.from()` static method, which creates a new array from an iterable (in this case, the values of a `Map`).
   - **Pros**: 
     - This is a standard way to convert an iterable (like the `Map.values()` iterator) into an array.
     - It’s concise and easy to read.
     - Supports additional transformation and mapping functions as part of its API.
   - **Cons**: Slightly more overhead compared to spread syntax for very large data sets, since it has to create a new array and populate it.

3. **`[...Map.values()]`**
   - **Description**: This utilizes the spread syntax (`...`) to expand the iterable returned by `Map.values()` into an array.
   - **Pros**: 
     - Concise and expressive, making use of modern JavaScript syntax.
     - Typically fast for converting iterables into arrays, as it doesn’t require an intermediary function call.
   - **Cons**: Not as flexible as `Array.from()` for transformations, though in many cases where no transformation is needed, it’s very efficient.

### Benchmark Results

From the benchmark results, we can see the following performance measurements (in executions per second):

- **`Array.from(Map.values())`**: ~39,053
- **`[...Map.values()]`**: ~38,988
- **`Map.values().toArray()`**: ~6,268 (likely not representative due to the incorrect assumption about a non-existent method).

### Conclusion and Considerations

- The best performers are `Array.from()` and the spread syntax, which showcase similar performance metrics, with a slight edge going to `Array.from()`.
- The `Map.values().toArray()` test serves as a cautionary example, affirming that invalid method calls can lead to performance measurements that fail to represent a valid use case in a project.
  
### Alternatives

- Other alternatives for converting `Map` values to an array include:
  - **Using a loop** (e.g., `forEach`): Can be used when additional processing is required during the conversion.
  - **Using `map()` on the iterator**: This would need to first convert the values to an array using one of the valid methods above before applying `map()`.
  
When deciding which method to use, developers should balance performance with code readability and maintainability, along with the specific context of the application.

Related benchmarks:

Map.values().toArray() vs Array.from(Map.values()) vs [...Map.values()] (version: 1)

Comparing performance of: Map.values().toArray() vs Array.from(Map.values()) vs [...Map.values()]

Created: one year ago by: Registered User

Jump to the latest result

Map.values().toArray()

Array.from(Map.values())

[...Map.values()]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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