Benchmark: Array.map().filter(Boolean) vs Array.flatMap()

Script Preparation code:

var arr1 = ['', '1231237', '', '', '', '', 'ergre', '', '', '', '', 'asdf1134', '', '', '123'];
var arr2 = ['1231237', '123','1231237', '123','1231237', '', '123sdfsdf','sdfsdf'];

Tests:

Array.map().filter(Boolean)
var result = arr1.map(str => str && arr2.includes(str) && str).filter(Boolean); console.log(result);
Array.flatMap()
var result = arr1.flatMap(str => str && arr2.includes(str) && str ? [str] : []); console.log(result);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.map().filter(Boolean)
Array.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.

Measuring the performance of JavaScript operations is crucial for developers to optimize their code. In this case, we're analyzing two approaches: `Array.map()` with filtering out falsy values using `Boolean` and `Array.flatMap()`. I'll break down what's being tested, compare the options, pros, cons, and other considerations.

**What's being tested?**

The benchmark is comparing two array operations:

1. `Array.map().filter(Boolean)`: This approach uses the `map()` method to create a new array with filtered values. The filtering part applies `Boolean` to each element in the original array. This means that only truthy elements (elements that are not falsy, e.g., null, 0, empty strings, etc.) will be included in the new array.
2. `Array.flatMap()`: This approach uses the `flatMap()` method to create a new array with flattened and filtered values. The filtering part applies a conditional expression (`str && arr2.includes(str) && str`) to each element in the original array.

**Options compared**

The two options are:

* **Array.map().filter(Boolean)**: A traditional, widely-supported approach that uses `map()` and `filter()` methods.
* **Array.flatMap()**: A newer, more concise approach introduced in ECMAScript 2019, which combines the benefits of both `map()` and `reduce()` methods.

**Pros and Cons**

**Array.map().filter(Boolean)**

Pros:

* Wide support across browsers and engines
* Easy to read and understand
* Allows for easy filtering out falsy values

Cons:

* Can be slower due to the additional filtering step
* May lead to unnecessary work if the array is already filtered or empty

**Array.flatMap()**

Pros:

* More concise and expressive syntax
* Combined filtering and flattening operations in a single step
* May perform better than `map()` with filtering, as it avoids an extra filtering step

Cons:

* Less widely supported (only introduced in ECMAScript 2019)
* May require additional browser support for older versions
* Can be less readable for developers unfamiliar with the syntax

**Other considerations**

Both approaches have some caveats to consider:

* **Falsy values**: In both cases, falsy values will be filtered out. However, if the original array contains a mix of truthy and falsy values, `Array.flatMap()` may perform better by filtering them in one step.
* **Empty arrays**: If the original array is empty, `Array.map().filter(Boolean)` will return an empty array, while `Array.flatMap()` may throw an error or produce unexpected results.

**Library/Functionality usage**

There are no external libraries used in this benchmark. Both `map()` and `flatMap()` are built-in methods of the JavaScript Array prototype.

**Special JS feature/syntax**

No special features or syntax are highlighted in this benchmark, except for the introduction of `Array.flatMap()` in ECMAScript 2019.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; SM-S901B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 104 on Android

View result in a separate tab

Test name	Executions per second
Array.map().filter(Boolean)	42680.0 Ops/sec
Array.flatMap()	40289.1 Ops/sec

Related benchmarks:

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

comparison of filtering out falsy values from an array

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

Created: 3 years ago by: Registered User

Jump to the latest result

Array.map().filter(Boolean)

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