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

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

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark is defined by a JSON object that specifies two test cases:

1. `flatmap vs filter-map`
2. `filter -> map` and `flatmap`

The script preparation code sets up an array `arr` with values from 0 to 100,000. The HTML preparation code is empty.

**Options Compared**

Two options are compared in this benchmark:

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

Both options take an array `arr` and apply a transformation to each element, filtering out elements that don't meet a certain condition (`x % 3`) and then mapping over the remaining elements.

**Pros and Cons of Each Approach**

1. **FlatMap**: This approach uses the `flatMap()` method, which is a more modern and efficient way of transforming arrays. It short-circuits and returns an iterator that yields the transformed values one by one.
	* Pros: More concise, efficient, and can be faster for large arrays.
	* Cons: Less readable for developers who are not familiar with this syntax.
2. **Filter-Map**: This approach uses two separate methods, `filter()` and `map()`. It's a more traditional way of transforming arrays, but it may incur additional overhead due to method calls.
	* Pros: More readable and maintainable, especially for developers who are not familiar with `flatMap()`.
	* Cons: May be slower than `flatMap()` due to the additional overhead.

**Library and Purpose**

There is no explicit library mentioned in the benchmark definition. However, `flatMap()` is a standard method introduced in ECMAScript 2019 (ES10), which is supported by modern browsers like Firefox 93. The `filter()` and `map()` methods are also part of the ECMAScript standard.

**Special JS Features or Syntax**

There is no mention of special JavaScript features or syntax in this benchmark, such as async/await, generators, or arrow functions (although the callback function in the script preparation code is an old-school way of handling loops).

**Other Alternatives**

If you wanted to write a similar benchmark using other methods or libraries, here are some alternatives:

1. **Sieve-based filtering**: Instead of using `filter()` and `map()`, you could use a sieve-based approach to filter the elements before mapping them.
2. **Regular expressions**: You could use regular expressions to filter the elements, but this might be slower than the built-in methods used in the benchmark.
3. **For loops**: You could use traditional for loops to iterate over the array and apply the transformation, but this would likely be slower than the built-in methods.

Keep in mind that these alternatives are just for illustration purposes, and it's recommended to stick with the standard methods like `filter()`, `map()`, and `flatMap()` for most use cases.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0

Browser/OS: Firefox 93 on Linux

View result in a separate tab

Test name	Executions per second
filter -> map	175.9 Ops/sec
flatmap	177.8 Ops/sec

Related benchmarks:

flatmap vs filter-map (version: 0)

Comparing performance of: filter -> map vs flatmap

Created: 3 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 one month ago):