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);

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Filter/Map

33K/s

Map/Filter

27K/s

Reduce

10K/s

Fastest: Filter/Map (3.4x faster)

View exact numbers

✓ Filter/Map: 32,654 ops/sec
• Map/Filter: 26,872 ops/sec
• Reduce: 9,732 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months 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

Filter/Map

48K/s

Reduce

45K/s

Map/Filter

44K/s

View exact numbers

Test name	Executions per second
✓ Filter/Map	47,739 Ops/sec
Reduce	44,547 Ops/sec
Map/Filter	44,369 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.

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

Go to the latest result

Reduce

Filter/Map

Map/Filter

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Reduce

Filter/Map

Map/Filter

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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