Benchmark: 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 : [])

Historical Performance Data aggregated from 252 community runs

Desktop Results:

Chrome 186 runs

flatMap()

698/s

filter().map()

572/s

Fastest: flatMap() (1.2x faster)

View exact numbers

✓ flatMap(): 698 ops/sec
• filter().map(): 572 ops/sec

Firefox 44 runs

filter().map()

756/s

flatMap()

676/s

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

View exact numbers

✓ filter().map(): 756 ops/sec
• flatMap(): 676 ops/sec

Safari 9 runs

flatMap()

2K/s

filter().map()

960/s

Fastest: flatMap() (1.9x faster)

View exact numbers

✓ flatMap(): 1,867 ops/sec
• filter().map(): 960 ops/sec

Other 5 runs

filter().map()

459/s

flatMap()

231/s

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

View exact numbers

✓ filter().map(): 459 ops/sec
• flatMap(): 231 ops/sec

Mobile Results:

Safari 8 runs

filter().map()

3K/s

flatMap()

2K/s

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

View exact numbers

✓ filter().map(): 2,839 ops/sec
• flatMap(): 2,251 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: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 Edg/147.0.0.0

Browser/OS: Chrome 147 on Windows

View result in a separate tab

flatMap()

1K/s

filter().map()

869/s

View exact numbers

Test name	Executions per second
✓ flatMap()	1,001 Ops/sec
filter().map()	869 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark that compares two approaches: `flatMap()` and `filter().map()`. The benchmark is designed to measure the performance difference between these two methods when used in conjunction with each other.

**Options Compared**

The benchmark compares the execution time of the following options:

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

Both approaches are designed to iterate over an array (`arr`) and perform a calculation on each element. The main difference lies in how the iteration is handled:

* `flatMap()` returns a new array with the results of applying the provided function to each element, without creating an intermediate array.
* `filter().map()` creates two intermediate arrays: one filtered by `filter()`, and then mapped over the result using `map()`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `flatMap()`
	* Pros:
		+ Creates fewer intermediate arrays, potentially reducing memory allocation and garbage collection overhead.
		+ Can be more efficient for large datasets, as it avoids creating unnecessary arrays.
	* Cons:
		+ May require a slightly higher number of function calls, which can lead to increased execution time due to the overhead of invoking functions.
2. `filter().map()`
	* Pros:
		+ Can be easier to understand and maintain, as the intent is clearer (filtering and then mapping).
	* Cons:
		+ Creates two intermediate arrays, which can increase memory allocation and garbage collection overhead.

**Library/Functionality Used**

In this benchmark, no specific library or functionality is used beyond the built-in JavaScript methods `flatMap()` and `filter().map()`. However, it's worth noting that some browsers may have additional optimizations for these methods, such as Chrome's `flatMap()` optimization (introduced in version 129).

**Special JS Feature/Syntax**

The benchmark uses no special JavaScript features or syntax beyond the standard ECMAScript methods mentioned earlier.

**Other Alternatives**

For those interested in exploring alternative approaches:

1. **Array.prototype.reduce()**: Instead of using `filter().map()`, you could use `reduce()` to combine the elements and calculate the result.
2. **Closures**: You could create a closure that iterates over the array, performing the calculation on each element without creating intermediate arrays.
3. **Loop-based iteration**: You could write a simple loop to iterate over the array, performing the calculation on each element manually.

Keep in mind that these alternatives may not be as concise or readable as using built-in methods like `flatMap()` and `filter().map()`, but they can provide an interesting perspective on how to solve similar problems.

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

flatMap vs filter map

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

Created: 5 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

Historical Performance Data aggregated from 252 community runs

Desktop Results:

Chrome 186 runs

Firefox 44 runs

Safari 9 runs

Other 5 runs

Mobile Results:

Safari 8 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() (version: 0)

flatMap vs filter map

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

Created: 5 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

Historical Performance Data aggregated from 252 community runs

Desktop Results:

Chrome 186 runs

Firefox 44 runs

Safari 9 runs

Other 5 runs

Mobile Results:

Safari 8 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()`