Benchmark: flatMap() vs filter().map() vs array.reduce

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = {id: i++, value: Math.random()};

Tests:

filter().map()
arr.filter(x => x.id % 3).map(x => x.value)
flatMap()
arr.flatMap(x => x.id % 3 ? [x.value] : [])
Test redude
arr.reduce((acc, x)=> x.id % 3? [...acc, x]: acc, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()
Test redude

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	558.1 Ops/sec
flatMap()	547.6 Ops/sec
Test redude	0.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 the provided benchmark test cases.

**Benchmark Overview**

The benchmark tests three different approaches to transform and process an array of objects with `id` and `value` properties:

1. `flatMap()`
2. `filter().map()`
3. `array.reduce()`

**Options Compared**

The options being compared are the most efficient ways to achieve the same result, which is to apply a transformation to each object in the array based on its `id`. The transformation depends on the `id` modulo 3 (i.e., if the remainder when divided by 3 is 0, keep the value as is; otherwise, create an empty array and concatenate it with the current value).

**Pros and Cons of Each Approach**

1. **flatMap()**
	* Pros: concise syntax, can be more readable and easier to maintain for some developers.
	* Cons: might not be as efficient as other approaches due to potential overhead from array creation and concatenation.
2. **filter().map()**
	* Pros: well-established and widely used pattern, easy to understand for many developers.
	* Cons: involves two separate operations (filtering and mapping), which can lead to performance overhead compared to a single operation.
3. **array.reduce()**
	* Pros: efficient use of accumulator data structure, allows for concise code and potential parallelization.
	* Cons: might be less readable for some developers due to its functional programming nature.

**Library Used**

The `filter()` method uses the Array.prototype.filter() function, which is a built-in JavaScript method. The purpose of this library is to return a new array with all elements that pass the test implemented by the provided function.

**Special JS Feature/Syntax**

None mentioned in this specific benchmark.

**Other Considerations**

When choosing between these approaches, consider factors like:

* Code readability and maintainability
* Performance requirements (e.g., real-time data processing)
* Browser and platform compatibility

**Alternative Approaches**

Additional approaches to transform the array could include:

1. Using `forEach()` with a callback function.
2. Employing a custom `map` function or higher-order function (e.g., `reduce`).
3. Leveraging libraries like Lodash or Ramda, which provide additional functional programming utilities.

However, these alternatives may not be as straightforward to implement and might incur performance overhead compared to the built-in methods tested in this benchmark.

Related benchmarks:

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

flatMap vs filter map vs. reduce

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

Created: 3 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

Test redude

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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