Benchmark: flatMap() vs only 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: 10 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter()	1172.1 Ops/sec
flatMap()	622.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The provided JSON represents a benchmark definition for two different approaches: `filter()` and `flatMap()`. The benchmark aims to compare the performance of these two methods on an array.

**Options Compared**

Two options are compared:

1. **`filter()`**: This method creates a new array with all elements that pass the test implemented by the provided function.
2. **`flatMap()`**: This method is similar to `filter()`, but it also flattens the resulting array, meaning that each element in the original array becomes an individual element in the new array.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`filter()`**:
	+ Pros: Simple to understand, widely supported, and efficient for simple use cases.
	+ Cons: Creates a new array, which can lead to performance issues with large datasets.
* **`flatMap()`**:
	+ Pros: More expressive than `filter()`, especially when dealing with nested arrays or objects. It's also more concise in many cases.
	+ Cons: May incur additional overhead due to the flattening process.

**Library and Purpose**

In this benchmark, no specific library is used beyond the standard JavaScript array methods. However, it's worth noting that `flatMap()` was introduced in ECMAScript 2019 (ES2020) as a replacement for `map().every()`. This makes `flatMap()` a more modern and efficient choice.

**Special JS Feature or Syntax**

There are no special JS features or syntax used in this benchmark beyond the standard array methods. However, if you're interested in exploring other advanced techniques, consider looking into arrow functions (`=>`), template literals (`\r\n`), or even some experimental features like `for...of` loops.

**Other Alternatives**

If you'd like to explore alternative approaches for filtering and flattening arrays, here are a few options:

* **Lodash's `filter()`**: Lodash is a popular utility library that provides an implementation of the `filter()` method. This could be used as an alternative to the standard JavaScript array method.
* **Using `reduce()`**: Instead of using `filter()` or `flatMap()`, you can use the `reduce()` method to build up a new array by applying a transformation function to each element in the original array.

Keep in mind that these alternatives may have different performance characteristics and trade-offs, so it's essential to test them to determine which one best suits your needs.

Related benchmarks:

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

flatMap vs filter

Comparing performance of: filter() vs flatMap()

Created: 2 years ago by: Guest

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