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

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 20) 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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Linux

View result in a separate tab

Test name	Executions per second
filter().map()	4235077.5 Ops/sec
flatMap()	398200.6 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 explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches: `filter().map()` and `flatMap()`. The test case is designed to measure the execution time of these methods on an array of numbers generated by a simple script. The goal is to determine which approach is faster for this specific use case.

**Script Preparation Code**

The script preparation code generates an array of 21 numbers using a while loop:
```javascript
var arr = [];
var i = 0;
while (i <= 20) arr[i] = i++;
```
This code creates an array with 21 elements, where each element is the current value of `i`. The `arr` variable will be used as input for both test cases.

**HTML Preparation Code**

The HTML preparation code is not provided, but it's likely that it's just a placeholder to indicate that some additional setup or configuration might be required before running the benchmark.

**Test Cases**

There are two individual test cases:

1. `filter().map()`
```javascript
arr.filter(x => x % 3).map(x => x/100)
```
This code first filters out elements from the array where `x` is divisible by 3 using `filter()`, and then maps each remaining element to its value divided by 100.

2. `flatMap()`
```javascript
arr.flatMap(x => x % 3 ? x/100 : [])
```
This code uses the `flatMap()` method to flatten the array, which means it will return a new array with all elements from the original array, but only if they meet the condition `x % 3 ? x/100 : []`. If no conditions are met, an empty array is returned.

**Pros and Cons of Each Approach**

Both approaches have their advantages and disadvantages:

1. `filter().map()`:
	* Pros: More readable and easier to understand for developers familiar with these methods.
	* Cons: May incur additional overhead due to the extra function call (i.e., `filter()`).
2. `flatMap()`:
	* Pros: Can be faster since it avoids the need for an extra function call.
	* Cons: Less intuitive and may require more explanation for developers unfamiliar with this method.

**Library Usage**

There is no explicit library usage in these benchmark test cases. However, if you're using a modern JavaScript engine that supports ES6+ features, `flatMap()` would likely use a built-in implementation under the hood.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in these benchmark test cases.

**Other Alternatives**

If you need to compare other methods for transforming arrays, consider using:

1. `forEach()`: A synchronous method that executes a callback function for each element in an array.
2. `reduce()`: A reduction method that applies a cumulative operation to an array of values.
3. `Array.prototype.reduceRight()` or `Array.prototype.every()`: Similar to `reduce()`, but with opposite order of operations.

Keep in mind that the performance difference between these methods can vary depending on the specific use case, input data, and JavaScript engine being used.

For this particular benchmark, using `flatMap()` seems to be faster than `filter().map()`, as indicated by the latest benchmark results.

Related benchmarks:

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

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):