Benchmark: reduce() vs filter().map() V3

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => x % 3).map(x => x/100)
reduce()
arr.reduce((acc, x) => (x % 3) ? [...acc, x] : acc, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Let's break down the provided benchmark and explain what's being tested, compared, and some of the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares two JavaScript methods: `filter()`, `map()` in combination (i.e., using `filter()` first and then applying `map()` to the filtered array), and `reduce()`. The goal is to determine which method performs better for this specific use case.

**Test Case 1: filter().map()**

The test case uses an array `arr` with a fixed size of 100,000 elements. Each element is initialized to its index value (`i`) in the loop. After the loop, two operations are performed on the array:

1. `filter(x => x % 3)`: This operation filters out elements whose index modulo 3 is not zero.
2. `map(x => x/100)`: This operation maps each element to its value divided by 100.

The resulting array is then compared with an empty array (`[]`).

**Test Case 2: reduce()**

The test case uses the same array `arr`. Instead of using `filter()` and `map()`, it uses a single `reduce()` function:

```javascript
arr.reduce((acc, x) => (x % 3) ? [...acc, x] : acc, [])
```

This implementation filters out elements whose index modulo 3 is not zero while building the resulting array.

**Comparison**

The test cases aim to determine which approach is faster for this specific use case:

* `filter()` followed by `map()`
* Using a single `reduce()` function

**Pros and Cons of Each Approach:**

1. **Filter().map():**
	* Pros:
		+ More explicit filtering and mapping operations.
		+ Easier to understand and maintain.
	* Cons:
		+ Involves an additional array creation step (using the spread operator), which can be slower due to memory allocation.
2. **Reduce():**
	* Pros:
		+ Only involves a single array mutation, reducing the number of operations needed.
		+ Can be faster since it avoids creating new arrays during filtering and mapping.
	* Cons:
		+ Requires a more complex implementation, which can make it harder to understand and maintain.

**Library: None**

There are no external libraries used in this benchmark.

**Special JavaScript Features/ Syntax: None**

The benchmark does not use any special JavaScript features or syntax that requires explanation.

**Alternatives:**

Other alternatives could be:

* Using `Array.prototype.filter()` followed by `Array.prototype.map()`
* Using a library like Lodash (e.g., `_.filter(_.map)`) to simplify the code
* Using a different array mutation approach, such as using `reduceRight()` or `forEach()`

However, these alternatives would likely have similar performance characteristics to the original implementations.

Overall, this benchmark aims to provide insight into the performance differences between `filter()` followed by `map()`, and using a single `reduce()` function for a specific use case.

Related benchmarks:

reduce() vs filter().map() V3 (version: 0)

reduce vs filter map

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

Created: 4 years ago by: Guest

Jump to the latest result

filter().map()

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