Benchmark: filter + map vs reduce

Script Preparation code:

var arr = []
for (var i = 0; i < 1000000; i++) {
  arr.push({ Status: Math.random() > 0.5 ? 'Active': 'NotActive' })
}

Tests:

filter + map
arr.filter(item => item.Status !== 'NotActive').map(item => { status: item.Status })
reduce
arr.reduce((acc, item) => { if (item.Status !== 'NotActive') { acc.push({ status: item.Status }) return acc } return 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:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter + map	121.3 Ops/sec
reduce	127.9 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 provided JSON and explain what's being tested in this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark is comparing two approaches: `filter + map` and `reduce`. The script preparation code generates an array of 1 million objects with a random "Status" property, which can be either "Active" or "NotActive".

**Options Compared**

The two options being compared are:

1. **Filter + Map**: This approach first filters out the objects that have "NotActive" status using `arr.filter()`, and then maps over the remaining filtered array to create a new array with only the "status" property, using `map(item => { status: item.Status })`.
2. **Reduce**: This approach uses `reduce()` to accumulate an array of objects with the "status" property. The reduce function iterates through the original array, adding an object with the "status" property to the accumulator if the current element's status is not "NotActive", and returning the accumulator as the final result.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Filter + Map**:
	* Pros: This approach is often more efficient because it uses two separate operations that can be optimized independently.
	* Cons: It requires extra memory to store the filtered array, which may not be desirable for large inputs.
2. **Reduce**:
	* Pros: This approach is more concise and doesn't require creating an intermediate array, which can save memory.
	* Cons: The reduce function must iterate through the entire array in each iteration, which can lead to slower performance.

**Library Usage**

There is no explicit library usage mentioned in the benchmark definition. However, `Math.random()` is used to generate random values for the "Status" property.

**Special JavaScript Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Considerations**

When choosing between these two approaches, consider the following:

* Memory usage: If memory efficiency is a concern, `reduce` might be a better choice.
* Code readability and maintainability: `filter + map` can be more readable and easier to understand for some developers.

**Alternative Approaches**

Some alternative approaches that could be considered in this benchmark include:

1. **Using a loop**: Instead of using the `filter()` and `map()` methods, a simple loop could be used to iterate through the array and create the new array.
2. **Using an array comprehension**: This approach uses a syntax similar to other programming languages (e.g., Python) to create the new array in a single statement.
3. **Using a custom implementation of `filter()` and `map()`**: Some developers might be interested in seeing how performance compares to using the built-in methods, versus implementing their own versions.

Overall, this benchmark provides a simple and straightforward way to compare the performance of two common JavaScript approaches: filtering followed by mapping, and reducing.

Related benchmarks:

filter + map vs reduce (version: 0)

Comparing performance of: filter + map vs reduce

Created: 5 years ago by: Guest

Jump to the latest result

filter + map

reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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