Benchmark: Array.flat vs Array.flatMap

HTML Preparation code:

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

Script Preparation code:

const arr = Array.from({length: 10_000}, (_,index) => [index, index + 1, index + 2, index + 3, index + 4]);

Tests:

flatMap
arr.flatMap((item) => item);
flat
arr.flat();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
flat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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
flatMap	702.3 Ops/sec
flat	737.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of two different array methods in JavaScript: `Array.flat` and `Array.flatMap`. These methods are used to manipulate arrays, but they serve distinct purposes and have different performance implications, which this benchmark aims to quantify.

### Test Cases Description

1. **flatMap**: 
   - **Definition**: `arr.flatMap((item) => item);`
   - **Functionality**: The `flatMap` method first maps each element using a mapping function (in this case, it returns the item itself) and then flattens the resulting array by one level. This means if the output of the mapping function is an array, the elements of that array will be spread into the result array.
   - **Use Case**: This method is particularly useful when you want to transform elements and also flatten the output at the same time.

2. **flat**: 
   - **Definition**: `arr.flat();`
   - **Functionality**: The `flat` method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth, which defaults to 1 if not specified. In this benchmark, it flattens the array created during the preparation step by one level.
   - **Use Case**: This method is beneficial when you already have a nested array structure and want to flatten it without additional transformation.

### Performance and Considerations

The benchmark provides results in terms of "Executions Per Second" for both methods:

- **flat**: 737.10 ops/sec
- **flatMap**: 702.29 ops/sec

#### Pros and Cons:

1. **Array.flat**:
   - **Pros**:
     - Straightforward when you need to flatten a nested array without any transformations.
     - Generally performs better in this specific benchmark scenario since it doesn't involve a mapping function which can add overhead.
   - **Cons**:
     - Limited to just flattening; does not allow transformation of elements during flattening.

2. **Array.flatMap**:
   - **Pros**:
     - Versatile: allows you to transform elements while flattening. Ideal for situations where both actions are needed.
   - **Cons**:
     - Potentially slower in performance compared to `flat` when only flattening is desired, due to the overhead of the mapping function.

### Alternatives

Other alternatives for handling nested arrays in JavaScript include:

- **Using a traditional loop**: Manually iterate over arrays to flatten them, which provides control but can be more verbose and less readable.
- **Recursion**: Use a recursive function to achieve deeper flattening. This is flexible and can be customized for any level of nesting, but it has a higher complexity and can lead to stack overflow errors for deeply nested arrays.
- **Libraries**: Libraries like Lodash provide utility functions (like `_.flatten` and `_.flatMap`) that may offer additional features like deep flattening or concise syntax. However, using these libraries comes with the trade-off of adding additional dependencies to a project.

### Conclusion

This benchmark illustrates a performance comparison of `Array.flat` versus `Array.flatMap`, highlighting their use cases, performance metrics, and practical implications for array manipulation in JavaScript. For cases where transformation and flattening are required, `flatMap` is ideal, while `flat` excels in simple flattening scenarios. Consider performance implications, readability, and maintainability when choosing between them or opting for alternative methods.

Related benchmarks:

Array.flat vs Array.flatMap (version: 1)

Comparing performance of: flatMap vs flat

Created: one year ago by: Guest

Jump to the latest result

flatMap

flat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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