Benchmark: filter_map vs reduce

Script Preparation code:

arr = [];
for (let i = 0; i < 100000; ++i) {
  arr.push({
    foo: Math.random() > 0.5,
    bar: Math.round(Math.random() * 10000),
  });
}

Tests:

reduce
const result = arr.reduce((acc, item) => { if (!item.foo) { acc.push(item.bar); } return acc; }, []);
filter_map
const result = arr .filter((item) => !item.foo) .map((item) => item.bar);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
filter_map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; SM-A505FN) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Mobile Safari/537.36

Browser/OS: Chrome Mobile 86 on Android

View result in a separate tab

Test name	Executions per second
reduce	154.3 Ops/sec
filter_map	98.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided JSON represents two benchmark test cases: `filter_map` and `reduce`. Both tests aim to measure the performance difference between two approaches for filtering and mapping an array.

**Benchmarked concepts**

1. **Filtering**: The first step in both tests is filtering the input array `arr` based on a condition (`foo === false`). This is done using two different methods:
	* `filter_map`: A combination of the `Array.prototype.filter()` and `Array.prototype.map()` methods.
	* `reduce`: An accumulator-based approach using the `Array.prototype.reduce()` method.
2. **Mapping**: After filtering, both tests map the resulting array to extract a specific value (`bar`).
3. **Performance comparison**: The benchmark measures the number of executions per second (ExecutionsPerSecond) for each test case on different browsers and devices.

**Comparison options**

The two approaches compared are:

1. `filter_map`: This method uses the `Array.prototype.filter()` method to create a new array with only the elements that pass the test, followed by the `Array.prototype.map()` method to transform each element in the resulting array.
2. `reduce`: This method uses an accumulator-based approach where the initial value of the accumulator is an empty array (`[]`). As the array is iterated through, each element's `foo` property is checked. If it's false, the corresponding `bar` value is added to the accumulator.

**Pros and Cons**

1. **filter_map**:
	* Pros: Generally considered more readable and maintainable due to its modular structure.
	* Cons: May incur additional overhead due to creating intermediate arrays.
2. **reduce**:
	* Pros: Can be more efficient for large datasets, as it avoids creating multiple intermediate arrays.
	* Cons: Can be less readable and more challenging to understand, especially for complex transformations.

**Library usage**

None of the provided benchmark test cases use external libraries. However, `Array.prototype.filter()` and `Array.prototype.map()` are built-in methods in JavaScript that can be used with or without libraries.

**Special JS features**

Neither of the benchmark test cases utilizes any special JavaScript features like async/await, let constants, or other modern language features.

Now, when it comes to alternatives:

1. **Other array filtering methods**: There are other array filtering methods available in JavaScript, such as `Array.prototype.every()` and `Array.prototype.some()`, which can be used for similar purposes.
2. **Native functions with different signatures**: Depending on the use case, you might consider using native functions like `filter()` or `map()` from a specific library (e.g., Lodash) that offer alternative signatures or behaviors.

In conclusion, the choice between `filter_map` and `reduce` ultimately depends on your personal preference, performance requirements, and code readability. MeasureThat.net's benchmarking helps you compare these two approaches in a controlled environment, ensuring accurate results for your specific use case.

Related benchmarks:

filter_map vs reduce (version: 0)

Comparing performance of: reduce vs filter_map

Created: 4 years ago by: Registered User

Jump to the latest result

reduce

filter_map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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