Benchmark: lodash flatMap() vs lodash filter().map()

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

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

Tests:

filter().map()
_.map(_.filter(arr,x => x % 3), x => x/100)
flatMap()
_.flatMap(arr, 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

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	980.2 Ops/sec
flatMap()	447.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Overview**

The benchmark compares two approaches for data processing using the `lodash` library: `filter().map()` and `flatMap()`. The goal is to measure which approach performs better, faster, and more efficiently.

**Options Compared**

Two options are compared:

1. **Filter().Map()**: This approach involves filtering an array using `_filter()` from Lodash, followed by mapping the resulting array using `_map()` from Lodash.
2. **FlatMap()**: This approach uses `flatMap()` from Lodash to process the original array directly.

**Pros and Cons of Each Approach**

1. **Filter().Map()**
	* Pros:
		+ More intuitive for developers familiar with traditional filtering and mapping operations.
		+ Can be easier to understand and maintain, especially for smaller datasets.
	* Cons:
		+ May incur additional overhead due to the extra function call (filtering + mapping).
		+ Could lead to slower performance compared to `flatMap()`, as each element is processed twice.
2. **FlatMap()**
	* Pros:
		+ More efficient, as elements are only processed once.
		+ Can be faster for larger datasets or more complex operations.
	* Cons:
		+ May require additional knowledge of Lodash and its API.
		+ Can lead to more complex code if not used correctly.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks like array manipulation, string formatting, and object transformation. In this benchmark, `lodash` is used to provide the `filter()` and `map()` (as well as `flatMap()`) functions, which are tested against each other.

**Special JS Feature: None**

There are no special JavaScript features or syntaxes being used in these benchmarks.

**Benchmark Preparation Code**

The preparation code creates an array `arr` with 100,000 elements, incrementing by 1 from index 0 to 99,999. This array is then passed to the two functions under test (`filter().map()` and `flatMap()`).

**Latest Benchmark Result**

The result shows the performance of each approach on a desktop Chrome browser running on Mac OS X 10.15.7. The **ExecutionsPerSecond** metric indicates how many times each function can execute per second.

Overall, this benchmark provides a useful comparison between two approaches for data processing using Lodash. It helps developers understand the trade-offs between filtering and mapping versus flattening an array directly, and choose the most efficient approach based on their specific use case.

Related benchmarks:

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

lodash flatMap vs lodash filter map

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

Created: 2 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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