Benchmark: filter-map vs reduce

Script Preparation code:

a=[];
for(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)=>{
  var value=mapping(x);
  if(filtering(value)) acc.push(value);
  return acc;
}

Tests:

map-filter
a.filter(filtering).map(mapping);
reduce
a.reduce(reducing,[]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map-filter
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map-filter	25200.0 Ops/sec
reduce	25450.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and considered.

**Benchmark Definition**

The benchmark consists of two test cases:

1. `map-filter`: This test case compares the performance of two approaches to achieve the same result:
	* Approach 1: `a.filter(filtering).map(mapping)`
	* Approach 2: Not explicitly shown in the benchmark definition, but implied by the presence of a separate test case (`reduce`)
2. `reduce`: This test case measures the performance of using `Array.prototype.reduce()` to achieve the same result as `map-filter`.

**Script Preparation Code**

The script preparation code generates an array `a` containing 1000 elements, each representing a fraction with a numerator between 1 and 1000 (inclusive) and a denominator of 1000. Two functions are also defined:

* `filtering(x)`: Returns `true` if `(x * 114514) % 1 > 0.5`, which is a simple filtering condition.
* `mapping(x)`: Adds 0.1919 to the input value `x`.

The script preparation code sets up these functions and uses them to generate an array of filtered values using both approaches (`map-filter` and `reduce`). The resulting arrays are then pushed onto another array `acc`.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark does not test any rendering or UI-related performance.

**Comparison of Approaches**

The two approaches being compared in the `map-filter` test case:

* **Approach 1: `a.filter(filtering).map(mapping)`**: This approach uses `Array.prototype.filter()` to filter the elements, followed by `Array.prototype.map()` to apply the mapping function. The filtered array is then mapped again using another instance of `Array.prototype.map()`.
* **Approach 2: Not explicitly shown (implied by the presence of a separate test case (`reduce`))**: This approach uses `Array.prototype.reduce()` to accumulate the results.

**Pros and Cons**

1. **Approach 1 (`map-filter`)**:
	* Pros:
		+ More intuitive and closer to how developers would write this code.
		+ May be faster due to the benefits of pipelining operations in JavaScript (filtering, mapping, filtering, mapping).
	* Cons:
		+ Creates two intermediate arrays, which may lead to higher memory usage and slower performance for very large datasets.
2. **Approach 2 (`reduce`)**:
	* Pros:
		+ Reduces memory allocation and garbage collection overhead compared to the pipelined approach.
		+ Can be more efficient in terms of memory usage and faster performance for very large datasets.
	* Cons:
		+ May require more CPU cycles due to the accumulation of results in a single array.

**Library Usage**

The benchmark uses `Array.prototype.filter()`, `Array.prototype.map()`, and `Array.prototype.reduce()` without any additional libraries. These are built-in methods on the Array prototype, making them accessible from anywhere in JavaScript code.

**Special JS Feature or Syntax**

This benchmark does not use any special features or syntax, such as async/await, generators, or modern ES6+ features like arrow functions or template literals.

**Alternatives**

If you're interested in exploring alternative approaches for this benchmark, consider the following:

* **Using `Array.prototype.forEach()`**: Instead of filtering and mapping using `filter` and `map`, use `forEach()` to iterate over the array and apply both operations sequentially.
* **Using a custom loop**: Write a custom loop that iterates over the array and applies both operations (filtering and mapping) sequentially, without relying on built-in methods.
* **Using a different data structure**: Consider using a different data structure, such as a sparse array or an object with keys, to see if it affects performance.

Keep in mind that these alternatives may not provide the same results as the original benchmark, and their performance characteristics may vary depending on the specific use case and dataset.

Related benchmarks:

filter-map vs reduce (version: 0)

modified version of `map-filter vs reduce` that switches the order of operations

Comparing performance of: map-filter vs reduce

Created: 4 years ago by: Guest

Jump to the latest result

map-filter

reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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