Benchmark: flatMap() vs filter().map() - arrays

Script Preparation code:

var arr = []; var i = 0; while (i <= 1E5) arr[i] = i++;

Tests:

filter().map()
arr.filter(x => x % 3).map(x => x/100)
flatMap()
arr.flatMap(x => x % 3 ? [x/100] : [])

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/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	785.0 Ops/sec
flatMap()	754.7 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark, titled "flatMap() vs filter().map() - arrays", aims to compare the performance of two different approaches: `flatMap()` and the combination of `filter()` and `map()`.

**Options Compared**

Two options are compared:

1. **`flatMap()`**: This method is used to flatten an array (or an iterable) by mapping each element to a new array, and then flattening that array.
2. **`filter().map()`**: This approach involves filtering the array first, using `filter()`, and then mapping over the resulting array using `map()`.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`flatMap()`**:
	+ Pros: More efficient for arrays with a small number of elements or when dealing with nested arrays.
	+ Cons: May lead to higher memory usage, as it creates new arrays on the fly. Additionally, it can be less readable for developers who are not familiar with this method.
* **`filter().map()`**:
	+ Pros: More readable and maintainable, especially for complex filtering logic. It also allows for caching intermediate results using `Array.prototype.slice()`.
	+ Cons: May lead to higher memory usage due to the creation of a new array from the filtered results.

**Library and Special JS Features**

No external libraries are used in this benchmark. However, note that modern JavaScript implementations (like V8) provide some additional optimizations for certain methods, such as `flatMap()`.

**Special JS Syntax**

There is no special syntax being tested here. The code uses standard JavaScript syntax and is designed to be readable and understandable by developers familiar with the language.

**Other Alternatives**

If you were looking for alternatives to these two approaches, consider:

* **`forEach()`**: Instead of `map()`, you can use `forEach()` if you need to execute a function on each element without returning a new array.
* **`reduce()`**: For flattening arrays or accumulating values, `reduce()` might be a more suitable choice than `flatMap()`.

In summary, the benchmark tests two common approaches for flattening an array in JavaScript: `flatMap()` and the combination of `filter()` and `map()`. The results can help developers understand which approach is most efficient for their specific use cases.

Related benchmarks:

flatMap() vs filter().map() - arrays (version: 1)

flatMap vs filter map - always using array as arrow function result

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

Created: 4 years ago by: Registered User

Jump to the latest result

filter().map()

flatMap()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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