Benchmark: Reduce vs Filter/Map vs Map/Filter

Script Preparation code:

var a = [];
for (let i = 0; i < 1000; i++) {
    a.push(Number(i) / 1000);
}
var filtering = x => (x * 114514) % 1 > 0.5;
var mapping = x => x + 0.1919;
var reducing = (acc, x) => {
    const value = mapping(x);
    if (filtering(value)) {
        acc.push(value);
    }
    return acc;
}

Tests:

Reduce
a.reduce(reducing, []);
Filter/Map
a.filter(filtering).map(mapping);
Map/Filter
a.map(mapping).filter(filtering);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Filter/Map
Map/Filter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 22 days ago)

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

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Reduce	44546.5 Ops/sec
Filter/Map	47739.3 Ops/sec
Map/Filter	44368.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "Reduce vs Filter/Map vs Map/Filter", tests the performance of three different approaches to filter and transform an array in JavaScript: `reduce`, `filter` + `map`, and `map` + `filter`. The benchmark creates a large array of 1000 elements, each with a value representing a timestamp (number divided by 1000), and applies the specified filtering and transformation functions.

**Options Compared**

The three options compared are:

1. **Reduce**: Uses the `reduce` method to apply the filtering function cumulatively to the array, accumulating the results in an accumulator.
2. **Filter/Map**: Uses the `filter` method to filter out elements that don't meet the condition, followed by the `map` method to transform the remaining elements.
3. **Map/Filter**: Uses the `map` method to transform all elements in the array first, then uses the `filter` method to remove elements that don't meet the condition.

**Pros and Cons of Each Approach**

1. **Reduce**:
	* Pros: Can be more efficient since it only iterates over the array once.
	* Cons: May not be as readable or maintainable due to the accumulation of intermediate results in the accumulator.
2. **Filter/Map**: 
	* Pros: More readable and easier to understand, especially for developers familiar with functional programming concepts.
	* Cons: Requires two separate passes over the array, which can lead to more memory usage.
3. **Map/Filter**:
	* Pros: Can be more efficient than `filter` + `map`, as it transforms all elements before filtering them out.
	* Cons: Still requires two passes over the array, and may not be as readable as `filter` + `map`.

**Library Use**

There is no explicit library used in this benchmark. However, some browsers might use their own internal optimization or polyfills for certain methods.

**Special JS Feature/Syntax**

None mentioned in the provided code snippet.

**Other Alternatives**

If you're interested in exploring other approaches, consider:

* **forEach**: Instead of using `reduce`, `filter`, and `map`, you could use the `forEach` method to iterate over the array. However, this might not be as efficient or readable.
* **Lodash's `filterBy` and `transformEach` functions**: If you're familiar with Lodash, these functions can provide a concise way to filter and transform arrays using functional programming techniques.

Keep in mind that these alternatives might not be directly comparable to the original benchmark, as they might have different performance characteristics or syntax nuances.

Related benchmarks:

Reduce vs Filter/Map vs Map/Filter (version: 0)

Comparing performance of: Reduce vs Filter/Map vs Map/Filter

Created: 5 years ago by: Guest

Jump to the latest result

Reduce

Filter/Map

Map/Filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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