Benchmark: new Set from Map<number, number[]> - for..of vs Array.from(...).flat();

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const data = new Map([
  [100, [101, 102, 103, 104, 105]],
  [200, [201, 202, 203, 204, 205]],
  [300, [301, 302, 303, 304, 305]],
  [400, [401, 402, 403, 404, 405]],
  [500, [501, 502, 503, 504, 505]],
]);

Tests:

for..of
const set = new Set(); for (const ids of data.values()) { for (const id of ids) { set.add(id); } }
Array.from().flat()
const set = new Set(Array.from(data.values()).flat());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for..of
Array.from().flat()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for..of	665522.1 Ops/sec
Array.from().flat()	508007.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two methods for creating a `Set` from the nested arrays stored in a `Map` of numbers to arrays of numbers. The purpose of this benchmark is to evaluate the performance of two distinct approaches: using a `for..of` loop versus using `Array.from()` combined with `.flat()`.

### Benchmark Breakdown

1. **Preparation Code**:
   - `const data = new Map([...])` initializes a `Map` with keys being numbers and values being arrays of numbers. This structure is useful for organizing related data and allows for easy iteration over its values.

2. **Test Cases**:
   There are two main test cases:

- **for..of loop**:
     ```javascript
     const set = new Set();
     for (const ids of data.values()) {
       for (const id of ids) {
         set.add(id);
       }
     }
     ```
     This implementation uses a nested loop:
     - The outer loop iterates over the values of the `Map` (which are arrays).
     - The inner loop iterates over each number in those arrays and adds them to a `Set`. This approach allows items to be added while naturally handling duplicates.

- **Array.from().flat()**:
     ```javascript
     const set = new Set(Array.from(data.values()).flat());
     ```
     This method employs:
     - `Array.from(data.values())` to create an array from the `Map` values.
     - `.flat()` to flatten the array of arrays into a single array, which can then be passed directly to the `Set` constructor. This approach also effectively handles duplicates, as a `Set` by definition stores only unique values.

### Performance Results
- For the `for..of` approach, the benchmark recorded **2,634,135.0 executions per second**.
- The `Array.from().flat()` method had a significantly lower performance of **1,652,679.5 executions per second**.

### Pros and Cons

#### for..of loop:
- **Pros**:
  - More explicit, allowing for easier understanding of the iteration process.
  - Potentially more efficient with large datasets, as it avoids the overhead from creating intermediate arrays.
  - Can be easily customized if more complex logic is needed during iteration.

- **Cons**:
  - More verbose and may require more lines of code than alternative methods.

#### Array.from().flat():
- **Pros**:
  - Concise and elegant, resulting in fewer lines of code.
  - Utilizes modern JavaScript features that can be appealing for readability.

- **Cons**:
  - May incur additional overhead due to the creation of intermediate arrays, especially noticeable with larger datasets.
  - The use of `.flat()` can be less efficient if the depth of nesting increases.

### Other Alternatives
- **Using `reduce()`**:
  Another approach could involve using the `Array.prototype.reduce` method to accumulate results into a `Set`, which could provide similar functionality but may introduce its own performance trade-offs based on the nested structure.

- **Using classic for loops**:
  Traditional indexed `for` loops could also be employed for situations where performance is critical. This might allow for more fine-grained control, but generally at the cost of readability.

### Conclusion
This benchmark showcases the differences between two common JavaScript methods for dealing with nested data structures. While the `for..of` loop offers better performance in this particular case, developers should consider readability and maintainability alongside performance, especially when deciding on the best approach for their specific use case. Overall, the choice between these methods may depend on the context of use, data size, and developer preferences.

Related benchmarks:

new Set from Map<number, number[]> - for..of vs Array.from(...).flat(); (version: 1)

Comparing set creation from nested arrays using

Comparing performance of: for..of vs Array.from().flat()

Created: one year ago by: Guest

Jump to the latest result

for..of

Array.from().flat()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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