Benchmark: flatMap() vs filter().map() vs reduce() - filtered 9 times out of 10 - small array

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => !(x % 10)).map(x => x/100)
flatMap()
arr.flatMap(x => !(x % 10) ? [x/100] : [])
reduce()
arr.reduce((acc, x) => { if (!(x % 10)) acc.push(x / 100) return acc }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark for you.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to filter and transform an array in JavaScript: `flatMap()`, `filter().map()`, and `reduce()`. The test case uses a small array with 100 elements, where each element is assigned a value using a while loop.

**Options Compared**

1. **`flatMap()`**: This method flattens the array by mapping over it and returning an array of arrays. It's often preferred over `filter().map()` because it avoids the extra overhead of creating a temporary array.
2. **`filter().map()`**: This approach filters the array using `filter()`, then maps over the filtered array using `map()`. This method can be slower than `flatMap()` due to the extra operations.
3. **`reduce()`**: This method reduces the array by accumulating values in an accumulator and returning a single value. In this test case, it's used to accumulate the transformed elements in an array.

**Pros and Cons of Each Approach**

* **`flatMap()`**:
	+ Pros: Often faster than `filter().map()`, as it avoids creating a temporary array.
	+ Cons: Can be less intuitive for developers who aren't familiar with it.
* **`filter().map()`**:
	+ Pros: Easier to understand and implement, especially for those familiar with filtering and mapping.
	+ Cons: Slower than `flatMap()`, as it involves creating a temporary array.
* **`reduce()`**:
	+ Pros: Can be useful when accumulating values in an accumulator is necessary.
	+ Cons: Often slower than the other two approaches, due to the overhead of reducing the array.

**Library and Syntax**

There are no libraries used in this benchmark. The syntax is standard JavaScript.

**Special JS Features or Syntax**

None mentioned in the provided test case.

**Other Alternatives**

If you're interested in exploring alternative approaches, consider:

* Using `forEach()` instead of `map()`, as it can be faster for simple transformations.
* Implementing a custom filtering function using `Array.prototype.forEach()` and modifying the accumulator array directly.
* Using a library like Lodash to simplify the implementation and potentially improve performance.

Keep in mind that these alternatives might not always outperform the standard approaches, but they can provide interesting insights into the inner workings of JavaScript.

Related benchmarks:

flatMap() vs filter().map() vs reduce() - filtered 9 times out of 10 - small array (version: 0)

flatMap vs filter map vs reduce()

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

Created: 4 years ago by: Registered User

Jump to the latest result

filter().map()

flatMap()

reduce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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