Benchmark: flatMap() vs filter()

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter()
flatMap()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15

Browser/OS: Safari 14 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
filter()	1909.5 Ops/sec
flatMap()	905.4 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 is being tested.

**Benchmark Definition**

The benchmark, named "flatMap() vs filter()", compares the performance of two array methods: `filter()` and `flatMap()`.

**Script Preparation Code**

The script preparation code creates an empty array `arr` and populates it with numbers from 0 to 100,000 using a `while` loop. This ensures that both methods are tested on large arrays, which can have a significant impact on performance.

**Html Preparation Code**

There is no HTML preparation code provided, so we'll assume the benchmark is run in a headless environment (e.g., Node.js) and doesn't involve rendering web pages or waiting for user interaction.

**Test Cases**

The benchmark consists of two test cases:

1. `filter()`: This method creates a new array with all elements that pass the test implemented by the provided function.
2. `flatMap()`: This method returns a new array with the results of applying the provided function on every element in this array, from left to right.

**Options Compared**

The benchmark compares two main options:

a. **Filtering**: Using `filter()` to create a new array with filtered elements.
b. **Flattening and mapping**: Using `flatMap()` to create a new array with flattened and mapped elements.

**Pros and Cons of Each Approach**

**Filtering (using `filter()`):**

Pros:

* Simple and intuitive syntax
* Can be more efficient for smaller arrays or when only some elements need to be processed

Cons:

* Creates a new array, which can be memory-intensive for large datasets
* May lead to slower performance due to the overhead of creating a new array

**Flattening and mapping (using `flatMap()`):**

Pros:

* Avoids the creation of intermediate arrays, reducing memory allocation and deallocation overhead
* Can be more efficient for larger arrays or when all elements need to be processed

Cons:

* More complex syntax than filtering
* May lead to slower performance due to the overhead of applying multiple functions to each element

**Library Usage**

Neither `filter()` nor `flatMap()` relies on any external libraries. They are built-in methods in JavaScript, making them widely available across different browsers and environments.

**Special JS Feature or Syntax**

There is no special feature or syntax being tested here. The focus is solely on the performance comparison between two array methods.

**Other Alternatives**

If you need to flatten an array without using `flatMap()`, you can use a combination of `map()` and `concat()`:

```javascript
arr.map(x => x % 3 ? [x] : []).reduce((acc, elem) => acc.concat(elem), [])
```

However, this approach is less efficient than using `flatMap()`.

Overall, the benchmark provides valuable insights into the performance differences between two commonly used array methods in JavaScript.

Related benchmarks:

flatMap() vs filter() (version: 0)

flatMap vs filter

Comparing performance of: filter() vs flatMap()

Created: 3 years ago by: Registered User

Jump to the latest result

filter()

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