Benchmark: flatMap vs map/flat

Script Preparation code:

var arr = new Array(100000).fill(1);

Tests:

Test flatMap
arr.flatMap(() => [1, 2]);
Test map/flat
arr.map(() => [1, 2]).flat();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Test flatMap
Test map/flat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Test flatMap	529.3 Ops/sec
Test map/flat	110.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark measures the performance difference between `flatMap` and two approaches that emulate its behavior: `map/flat`. The goal is to understand which approach yields the best performance for array flattening operations.

**Tested Options**

There are three test cases:

1.  **`arr.flatMap(() => [1, 2])`**: This is the original `flatMap` method being tested.
2.  **`arr.map(() => [1, 2]).flat()`**: This is an implementation of `map/flat`, where the `map` function generates an array of arrays and then calls `flat` to flatten it.
3.  **`Array.prototype.flatMap.call(arr, () => [1, 2])`**: This approach uses `Array.prototype.flatMap` (a static method) to call the callback function on each element in the array.

**Pros and Cons**

*   **`arr.flatMap(() => [1, 2])`**:
    *   Pros: Native JavaScript implementation with built-in support for parallel processing.
    *   Cons: May have performance variations due to browser optimizations or caching.
*   **`arr.map(() => [1, 2]).flat()`**: 
    *   Pros: Easy to understand and implement, as it leverages existing `map` and `flat` methods.
    *   Cons: Involves additional function calls and potential overhead from creating intermediate arrays.
*   **`Array.prototype.flatMap.call(arr, () => [1, 2])`**:
    *   Pros: Similar to the native implementation but uses a static method call for flexibility.
    *   Cons: May incur slightly higher overhead due to the additional function call.

**Library and Special JS Feature**

There is no specific library used in this benchmark. However, it's essential to note that `flatMap` is a relatively new feature introduced in ECMAScript 2020 (ES10). If you're targeting older browsers or environments, these tests may not be directly applicable.

**Other Alternatives**

If you need to implement array flattening without using `map/flat`, other approaches might include:

*   **Using `forEach`**: Iterate over each element and manually push values into a new array.
*   **Implementing a custom `flatMap` method**: Define a custom function that uses existing JavaScript features like `map`, `reduce`, or `forEach`.
*   **Utilizing third-party libraries or polyfills**: Some libraries (e.g., Lodash) offer `flatten` functions, which can be used as alternatives to `flatMap`.

Related benchmarks:

flatMap vs map/flat (version: 0)

Comparing performance of: Test flatMap vs Test map/flat

Created: 2 years ago by: Guest

Jump to the latest result

Test flatMap

Test map/flat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):