Benchmark: filter-map vs reduce vs reduce with destructuring

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map-filter
reduce
reduce with desctructuring

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map-filter	24793.4 Ops/sec
reduce	25608.7 Ops/sec
reduce with desctructuring	6587.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares three different approaches for filtering and mapping data in JavaScript: `map-filter`, `reduce`, and `reduce with destructuring`. The benchmark is designed to measure which approach is faster and more efficient.

**Benchmark Definition JSON Analysis**

The benchmark definition JSON contains:

* **Name**: A unique name for the benchmark.
* **Description**: A brief description of the benchmark.
* **Script Preparation Code**: A JavaScript code snippet that creates an array `a` with 1000 elements, defines three functions: `filtering`, `mapping`, and `reducing`, and another function `reducingWithDestructuring`.
* **Html Preparation Code**: An empty string, indicating that no HTML preparation is required.

The script preparation code is crucial in defining the test case. It creates an array with 1000 elements, each element being a number divided by 1000. Three functions are defined:

* `filtering(x)`: Returns `true` if `(x * 114514) % 1 > 0.5`.
* `mapping(x)`: Adds 0.1919 to the input value `x`.
* `reducing(acc, x)`: Applies `mapping` to `x`, checks if `filtering(value)` is true, and pushes the result to the accumulator array `acc`. Returns the updated accumulator.
* `reducingWithDestructuring(acc, x)`: Similar to `reducing`, but uses destructuring syntax to return a new array with the pushed value.

**Options Comparison**

The benchmark compares three options:

1. **`map-filter`**: Uses the `filter` and `map` methods in sequence.
2. **`reduce`**: Uses the `reduce` method directly on the array.
3. **`reduce with destructuring`**: Uses the `reduce` method with destructuring syntax.

**Pros and Cons of Each Approach**

1. **`map-filter`**:
	* Pros: Simple and intuitive, easy to understand for developers familiar with `filter` and `map`.
	* Cons: May have performance issues due to the overhead of creating intermediate arrays.
2. **`reduce`**:
	* Pros: Can be more efficient than `map-filter`, as it avoids creating intermediate arrays.
	* Cons: Requires a good understanding of how `reduce` works, which can be challenging for beginners.
3. **`reduce with destructuring`**:
	* Pros: Offers flexibility and readability, making it easier to understand the intent behind the code.
	* Cons: May have performance issues due to the overhead of creating a new array.

**Library Usage**

None of the provided benchmark cases use external libraries.

**Special JavaScript Features or Syntax**

The `reduceWithDestructuring` function uses destructuring syntax, which is a feature introduced in ECMAScript 2018 (ES10). This syntax allows for more concise and readable code.

**Other Alternatives**

Alternative approaches to the three options:

1. **`forEach`**: Instead of using `map-filter`, you could use `forEach` with the `filter` method.
2. **`Array.prototype.reduce()`**: You could also use a loop instead of the `reduce` method.
3. **`lodash`**: If you're familiar with the Lodash library, you could use its `filterBy` and `map` methods to achieve similar results.

In summary, the benchmark provides a concise way to compare the performance of three different approaches for filtering and mapping data in JavaScript. By analyzing the script preparation code, options comparison, pros and cons, and special features or syntax, developers can gain a deeper understanding of how each approach works and make informed decisions when working with similar problems.

Related benchmarks:

filter-map vs reduce vs reduce with destructuring (version: 0)

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

Comparing performance of: map-filter vs reduce vs reduce with desctructuring

Created: 3 years ago by: Guest

Jump to the latest result

map-filter

reduce

reduce with desctructuring

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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