Benchmark: Array flatMap() vs filter().map()

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 month 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()	552.0 Ops/sec
flatMap()	551.2 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 benchmark and its results.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares two approaches for processing an array: `filter().map()` and `flatMap()`. The test case creates an array with 100,000 elements using a while loop and then applies each approach to it. The resulting array is filtered (removing every third element) and then mapped (dividing the remaining elements by 100).

**Options being compared**

There are two options being compared:

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

**Pros and Cons of each approach:**

1. **`filter().map()`**
	* Pros:
		+ Well-supported in older browsers (e.g., Internet Explorer 8-11).
		+ Easier to understand and implement, as it uses two separate methods.
	* Cons:
		+ Less efficient than `flatMap()`, especially for large arrays, since it creates an intermediate array and then maps over it.
2. **`flatMap()`**
	* Pros:
		+ More modern and efficient, as it eliminates the need for an intermediate array.
		+ Available in most modern browsers (including Firefox 101).
	* Cons:
		+ May be less intuitive to understand and implement, especially for those unfamiliar with this method.

**Library and purpose**

There is no library mentioned in the provided JSON. However, `flatMap()` is a built-in JavaScript method introduced in ECMAScript 2019.

**Special JS feature or syntax**

The test case does not use any special JavaScript features or syntax beyond the `flatMap()` method.

**Other alternatives**

If you wanted to compare additional approaches, you could consider adding more options, such as:

* Using `forEach` instead of `map`
* Implementing a custom solution using loops and array manipulation functions (e.g., `Array.prototype.reduce()`)
* Using a library like Lodash or Ramda for functional programming approaches

Keep in mind that each alternative would require additional configuration and benchmarking code.

**Benchmark preparation code**

The provided JSON includes the following script preparation code:

```javascript
var arr = [];
var i = 0;

while (i <= 1E5) {
    arr[i] = i++;
}
```

This code creates an array with 100,000 elements using a while loop.

Related benchmarks:

Array flatMap() vs filter().map() (version: 0)

Array flatMap vs filter map

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

Created: 2 years 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):