Benchmark: reduce() + concat() vs filter() then map()

Tests:

reduce() + concat()
const arr = [{a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}]; const filterMap = arr.filter(x => x.a !== 1).map(x => x.a)
filter() then map()
const arr = [{a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}]; const reduceConcat = arr.reduce((acc, val) => val.a === 1 ? acc : acc.concat([val.a]), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce() + concat()
filter() then map()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36 Edg/101.0.1210.39

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
reduce() + concat()	9875014.0 Ops/sec
filter() then map()	1473670.4 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The test case compares two approaches:

1. `reduce()` + `concat()`
2. `filter()` then `map()`

These two approaches aim to achieve the same result: summing up all the values in an array that meet a certain condition (in this case, having `a` equal to 1).

**Approach 1: reduce() + concat()**

This approach uses the `reduce()` method to accumulate the results and then concatenates the accumulated values using `concat()`.

```javascript
const arr = [{a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}];
const reduceConcat = arr.reduce((acc, val) => val.a === 1 ? acc : acc.concat([val.a]), []);
```

Pros:

* Can be efficient if the accumulator is large, as it avoids creating a new array for each iteration.
* Simple to implement.

Cons:

* Creates a new array on each iteration of `reduce()`, which can lead to memory allocation and deallocation overhead.
* Concatenates all values in the final result, which may not be desirable if performance is critical.

**Approach 2: filter() then map()**

This approach uses two separate methods: `filter()` to eliminate elements that meet the condition and `map()` to transform the remaining elements into the desired output.

```javascript
const arr = [{a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}, {a: 1}, {a: 2}, {a: 1}];
const filterMap = arr.filter(x => x.a !== 1).map(x => x.a);
```

Pros:

* More intuitive and readable code.
* Avoids creating a new array on each iteration.

Cons:

* May be slower due to the overhead of two separate method calls.
* Creates multiple arrays in memory, which can lead to performance issues for large datasets.

**Library Usage**

In both test cases, no specific libraries are used. However, it's worth noting that some JavaScript engines or frameworks might provide additional optimizations or helpers for these operations.

**Special JS Features/Syntax**

None are explicitly mentioned in the provided benchmark.

Now, let's discuss alternative approaches:

* **Array.prototype.reduceRight()**: Instead of using `reduce()`, you could use `reduceRight()` to iterate over the array from right to left. This might lead to a different performance profile.
* **Using `some()` instead of `filter()`**: You could use `some()` to check if at least one element meets the condition, and then transform the result using `map()`.
* **Using a custom accumulator data structure**: Instead of using an array, you could create a custom data structure (e.g., a linked list or a binary tree) that accumulates the results in a more efficient way.
* **Parallelizing the operations**: Depending on the use case and performance requirements, you might be able to parallelize the `reduce()` and `map()` operations using Web Workers or other concurrency techniques.

Keep in mind that these alternative approaches might not be directly relevant to the provided benchmark, but they demonstrate some of the possible variations when implementing this kind of operation.

Related benchmarks:

reduce() + concat() vs filter() then map() (version: 0)

Comparing performance of: reduce() + concat() vs filter() then map()

Created: 2 years ago by: Guest

Jump to the latest result

reduce() + concat()

filter() then map()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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