Benchmark: filter + map vs flatMap

Script Preparation code:

var items = [
      { id: 1, title: '1', isManager: true},
      { id: 2, title: '2', isManager: true},
      { id: 3, title: '3', isManager: false},
      { id: 4, title: '3', isManager: true},
      { id: 5, title: '4', isManager: false},
      { id: 6, title: '5', isManager: true},
      { id: 7, title: '6', isManager: true},
      { id: 8, title: '7', isManager: false},
      { id: 9, title: '8', isManager: true},
      { id: 10, title: '9', isManager: false},
      { id: 11, title: '10', isManager: false},
      { id: 12, title: '11', isManager: true},
      { id: 13, title: '12', isManager: true},
      { id: 14, title: '13', isManager: false},
      { id: 15, title: '14', isManager: true},
      { id: 16, title: '15', isManager: true},
      { id: 17, title: '16', isManager: false}
]

Tests:

filter().map()
items.filter(item => item.isManager).map(item => ({id: item.id, value: item.id, label: item.title}));
flatMap()
items.flatMap(({ isManager, id, title: label }) => isManager ? [{ id, value: id, label }] : []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	5725316.0 Ops/sec
flatMap()	2604257.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare the performance of two approaches:

1. `filter()` + `map()`
2. `flatMap()`

Both approaches are used to transform an array of objects (`items`) into a new array with some specific transformations applied.

**What's being compared?**

In the first approach, `filter()` is used to filter out objects that don't have the `isManager` property set to `true`. Then, `map()` is used to create a new object for each remaining item, which includes only the `id`, `value` (set to `id`), and `label` (set to `title`) properties.

In the second approach, `flatMap()` is used to transform each object in the array into an object with `isManager` as a boolean property, and then map over this new array to create a new object for each item. If an item has `isManager` set to `true`, the resulting object will include only the `id`, `value` (set to `id`), and `label` properties.

**Options compared**

We have two main options being compared:

1. **Filtering + Mapping**: This approach first filters out unwanted items and then maps over the remaining items.
2. **FlatMapping**: This approach transforms each item directly into a new object, which includes the desired properties (`id`, `value`, and `label`).

**Pros and Cons**

**Filtering + Mapping:**

Pros:

* Clearer intent: Each step (filtering and mapping) has a clear purpose.
* Easier to understand for beginners.

Cons:

* More overhead due to the extra step of filtering, which can lead to slower performance.

**FlatMapping:**

Pros:

* Less overhead due to fewer steps in the pipeline.
* Can be more efficient since it avoids unnecessary filtering.

Cons:

* May be less intuitive or harder to understand for beginners.
* Requires careful consideration of the transformation logic.

**Library and Special JS Features**

In this benchmark, we don't see any specific libraries being used. However, `flatMap()` is a built-in JavaScript method introduced in ECMAScript 2019 (ES2020). It's a shorthand for using both `Array.prototype.filter()` and `Array.prototype.map()`, making it more concise.

**Other Alternatives**

If you wanted to test alternative approaches, here are some options:

* Using `forEach()` instead of `map()` or `flatMap()`: This would involve transforming the array directly within the loop.
* Using a library like Lodash, which provides utility functions for common tasks like filtering and mapping arrays.
* Implementing your own custom iteration logic using `for...of` loops or `requestAnimationFrame()`.
* Considering the use of more modern JavaScript features, such as generators or async/await, to implement the transformation logic.

Keep in mind that these alternatives might affect the performance characteristics of the benchmark, so it's essential to test them thoroughly and consider the trade-offs.

Related benchmarks:

filter + map vs flatMap (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

filter().map()

flatMap()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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