Benchmark: flatMap() vs filter().map() 1asdasd

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

filter().map()

1K/s

flatMap()

848/s

Fastest: filter().map() (1.4x faster)

View exact numbers

✓ filter().map(): 1,164 ops/sec
• flatMap(): 848 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 28 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 26 on iOS 18.7

View result in a separate tab

flatMap()

2K/s

filter().map()

2K/s

View exact numbers

Test name	Executions per second
✓ flatMap()	2,289 Ops/sec
filter().map()	1,775 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 JSON benchmark definition and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches: `filter()`, `map()` vs `flatMap()`. The test name indicates that we're measuring the performance of each approach separately.

**Script Preparation Code**

The script preparation code creates an array `arr` with 100,000 elements using a simple loop. This array will be used to test both `filter()` and `flatMap()`.

**Options being compared**

There are two options being compared:

1. `filter()`, `map()`: This is the original approach that's often used in JavaScript.
2. `flatMap()`: A relatively new method introduced in ECMAScript 2019 (ES2020) that's designed to replace the traditional `filter()` + `map()` approach.

**Pros and Cons of each approach**

1. **`filter()`**, `map()`**: This is a widely supported, well-understood approach. It can be slower than `flatMap()` because it involves two separate operations: filtering and mapping.
	* Pros: Easy to understand, widely supported across browsers.
	* Cons: Can be slower due to the two-step process.
2. **`flatMap()```**: This method is designed to replace the traditional `filter()` + `map()` approach. It's optimized for performance and can produce better results in many cases.
	* Pros: Optimized for performance, can simplify code.
	* Cons: Not yet widely supported across browsers (FF 116 is a good start, but what about others?).

**Other considerations**

* The test uses JavaScript, which means that we need to consider the browser's implementation and its potential variations in performance. Firefox 116 seems to be doing well with `filter()` + `map()`, while `flatMap()` needs some improvement.
* The script preparation code creates a large array, which can affect performance. However, this is likely just for demonstration purposes.
* There are no special JavaScript features or syntax used in the benchmark definition.

**Library usage**

There is no library usage explicitly mentioned in the benchmark definition. The test uses built-in JavaScript methods (`filter()`, `map()`, and `flatMap()`).

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in this benchmark. However, it's worth noting that ES2020 (the spec for `flatMap()`) is still relatively new, so its adoption and browser support might be limited.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **`reduce()`**: This method can sometimes produce better results than `filter()` + `map()` or `flatMap()`, but it's less intuitive to use.
* **`Array.prototype.every()`**: This method is designed for more complex filtering scenarios and can be faster in some cases, but it's not as straightforward to use as the other methods.

Keep in mind that benchmarking JavaScript performance can be challenging due to the many factors at play. It's essential to run multiple iterations with different inputs and consider other sources of variability when drawing conclusions from such results.

flatMap() vs filter().map() 1asdasd (version: 0)

flatMap vs filter map

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

Created: 2 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

flatMap() vs filter().map() 1asdasd (version: 0)

flatMap vs filter map

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

Created: 2 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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