Benchmark: Filter out null and map nested object with flatMap() vs map().filter()

Script Preparation code:

var arr = [];
var id = 0;

while (id <= 1_000_000) {
  id++;
  arr[id] = id % 10 === 0
    ? { id, data: null }
    : { id, data: { id } };
}

Tests:

map().filter()
arr.map(it => it.data).filter(it => it !== null)
flatMap()
arr.flatMap(it => it.data != null ? [it.data] : [])
filter().map()
arr.filter(it => it.data !== null).map(it => it.data)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map().filter()
flatMap()
filter().map()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
map().filter()	16.7 Ops/sec
flatMap()	11.8 Ops/sec
filter().map()	15.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

In the provided benchmark, we are comparing different methods for filtering out null values and mapping over a nested object in JavaScript. The focus is primarily on the performance of three distinct approaches to achieve this goal: `map().filter()`, `flatMap()`, and `filter().map()`.

### Benchmark Breakdown

#### 1. Test Cases:
The benchmark evaluates three implementations:

- **map().filter()**
  - **Definition:** `arr.map(it => it.data).filter(it => it !== null)`
  - This approach first maps over the array to extract the `data` property, which can be `null`, and then filters out any `null` values.
  
- **flatMap()**
  - **Definition:** `arr.flatMap(it => it.data != null ? [it.data] : [])`
  - The `flatMap()` method combines mapping and flattening in a single operation. It maps each item to an array containing `data` if it's not `null` and omits `null` entries directly, effectively creating a one-dimensional array from the nested arrays.

- **filter().map()**
  - **Definition:** `arr.filter(it => it.data !== null).map(it => it.data)`
  - This method filters the array first for items where `data` is not `null` and then maps over the filtered results to extract the `data`.

### Performance Results
The benchmark results indicate the following performance (executions per second):
- `map().filter()`: 112,982,600
- `filter().map()`: 110,724,176
- `flatMap()`: 52,526,940

### Analysis of Options
1. **map().filter()**
   - **Pros:**
     - The code is straightforward and easy to understand.
     - Useful when the goal is to maintain the methodologies of mapping and filtering as separate logical operations.
   - **Cons:**
     - This approach can be less efficient since it creates an intermediate array from the `map()` operation before filtering.
     - Potentially higher memory usage due to intermediate results.

2. **flatMap()**
   - **Pros:**
     - More concise and allows for a direct mapping and filtering in one step, which can help boost performance.
     - Reduces the need for intermediate arrays, leading to lower memory overhead.
   - **Cons:**
     - Slightly less intuitive for developers who aren't familiar with functional programming or the `flatMap()` concept.
     - Not all environments support `flatMap()`, which may be a concern in legacy systems.

3. **filter().map()**
   - **Pros:**
     - Like the `map().filter()` method, this approach keeps operations distinct, which can improve code clarity.
   - **Cons:**
     - More iterations over the array, which can be less efficient compared to `flatMap()`.
     - Similar to the `map().filter()`, it may create intermediate structures.

### Other Considerations
- **Library Usage:** The benchmark does not mention the usage of any external libraries; it relies solely on native JavaScript array methods, which are built into the language.
- **Browser Performance:** The benchmark was executed in Chrome on a Mac, giving insight into how these methods perform in a specific context that might vary across different browsers.

### Alternatives
In addition to the methods tested, there are other alternatives for filtering and mapping arrays:
- **Manual Iteration:** A traditional `for` loop, which can be more verbose but gives complete control over performance optimizations.
- **Reducing Complexity:** Using a single loop with a conditional structure can avoid multiple passes over the data if you want to optimize memory and speed further.
  
Choosing the best approach depends on specific use cases, team familiarity with certain patterns, and the requirement for future-proofing code against various runtime environments.

Related benchmarks:

Filter out null and map nested object with flatMap() vs map().filter() (version: 5)

flatMap vs filter map

Comparing performance of: map().filter() vs flatMap() vs filter().map()

Created: 20 days ago by: Registered User

Jump to the latest result

map().filter()

flatMap()

filter().map()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):