Benchmark: Count matches using Array reduce vs Array filter

Script Preparation code:

var arr = ['a', 'b', 'c', 'a'];

Tests:

Array.filter
var count = arr.filter(item => item === 'a').length;
Array.reduce
var count = arr.reduce((acc, item) => { if (item === 'a') { acc++; } return acc; }, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.filter
Array.reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.filter	44556196.0 Ops/sec
Array.reduce	60449460.0 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 benchmark and its test cases to understand what is being tested.

**Benchmark Overview**

The benchmark measures the performance of two different approaches for counting matches in an array: `Array.filter` vs `Array.reduce`. The benchmark creates an array `arr` with four elements, including duplicates, and then uses both methods to count the occurrences of a specific element ('a').

**Test Cases**

There are two test cases:

1. **Array.filter**: This test case uses the `filter()` method to create a new array that only includes elements that match the condition (`item === 'a'`). The length of this filtered array is then used as an estimate of the number of matches.
2. **Array.reduce**: This test case uses the `reduce()` method to iterate over the original array and accumulate a count of matches. The initial value of the accumulator (`acc`) is set to 0, and for each element, if it's equal to 'a', the accumulator is incremented by 1.

**Options Compared**

The two options being compared are:

* `Array.filter`: This method creates a new array with filtered elements, which can be slower due to the overhead of creating a new array.
* `Array.reduce`: This method accumulates a count in the accumulator variable, which can be faster since it avoids creating a new array.

**Pros and Cons**

* **Array.filter**:
	+ Pros: Easy to read and understand, can be more intuitive for some developers.
	+ Cons: Creates a new array, which can be slower than using `reduce`.
* **Array.reduce**:
	+ Pros: Can be faster since it avoids creating a new array, can be more memory-efficient.
	+ Cons: Requires understanding of the accumulator variable and its behavior.

**Library Usage**

There is no library used in this benchmark. Both `Array.filter` and `Array.reduce` are built-in methods of JavaScript arrays.

**Special JS Features/Syntax**

None mentioned in this specific benchmark.

**Other Considerations**

The benchmark assumes that the array elements are compared using strict equality (`===`). If a loose equality comparison is used, the results may vary.

For alternative approaches, you can consider:

* Using `forEach()` instead of `reduce()`: This method iterates over the array without accumulating a count.
* Using a custom loop with indexing: This approach allows for fine-grained control over the iteration process but requires more manual effort.
* Using `findIndex()` or `indexOf()` instead of `filter()` or `reduce`: These methods can be faster and more efficient in certain scenarios, but may not provide the same level of control as `filter` and `reduce`.

Keep in mind that the choice of approach depends on the specific requirements of your use case.

Related benchmarks:

Count matches using Array reduce vs Array filter (version: 0)

Check if it's faster to count matches in an array using Array.filter or Array.reduce

Comparing performance of: Array.filter vs Array.reduce

Created: 3 years ago by: Guest

Jump to the latest result

Array.filter

Array.reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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