Benchmark: filter.map vs flatmap vs reduce vs flatmap precreated array and filter always true

Script Preparation code:

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

Tests:

filter.map
arr.filter(x => true).map(x => x/100)
flatmap
const preArr = [] arr.flatMap(x => x % 12 && x % 5 && x % 3 ? x/100 : preArr)
reduce
arr.reduce((newArray, x) => { if (x % 12 && x % 5 && x % 3) { newArray.push(x / 100) } return newArray }, [])

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'd be happy to help you understand the provided benchmark.

**Benchmark Overview**

The benchmark tests three different JavaScript methods for filtering and transforming an array: `filter.map`, `flatMap`, and `reduce`. The test case uses a predefined array `arr` that is populated with values from 0 to 100,000. The goal of each method is to filter out the numbers that do not satisfy a specific condition (e.g., multiples of 12, 5, and 3) and then map the remaining numbers to their values divided by 100.

**Options Compared**

The benchmark compares the following options:

1. `filter.map`: Uses the `Array.prototype.filter()` method to filter out elements that do not satisfy the condition, followed by the `Array.prototype.map()` method to transform the remaining elements.
2. `flatMap`: Uses the `Array.prototype.flatMap()` method to both filter and transform the array in a single operation.
3. `reduce`: Uses the `Array.prototype.reduce()` method to accumulate the filtered and transformed elements into an array.

**Pros and Cons of Each Approach**

1. `filter.map`:
	* Pros: Easy to understand, widely supported by browsers.
	* Cons: May require additional iterations or loops to achieve the same result as `flatMap`.
2. `flatMap`:
	* Pros: Often faster than `filter.map`, as it eliminates the need for an additional iteration.
	* Cons: Less intuitive and may require more complex understanding of array methods.
3. `reduce`:
	* Pros: Can be used to accumulate values in a single pass, potentially reducing memory allocations.
	* Cons: May require more complex setup and understanding of accumulator functions.

**Library Usage**

There is no explicit library usage in this benchmark. However, it's worth noting that the `flatMap()` method was introduced in ECMAScript 2019 (ES2020) as a part of the array methods standardization effort.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code is written in vanilla JavaScript, using only built-in methods and operators.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* **Using a custom filtering function**: Instead of relying on the `filter()` method, you could define a custom filtering function to achieve similar results.
* **Using `Array.prototype.forEach()` with a callback**: You can use the `forEach()` method with an arrow function or a traditional callback to iterate over the array and apply the filtering condition.
* **Using `Array.prototype.every()` or `Array.prototype.some()`**: Depending on your specific requirements, you might consider using these methods instead of `filter()`.

Keep in mind that each approach has its trade-offs and may not be suitable for all use cases.

Related benchmarks:

filter.map vs flatmap vs reduce vs flatmap precreated array and filter always true (version: 0)

Comparing performance of: filter.map vs flatmap vs reduce

Created: 3 years ago by: Guest

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