Benchmark: Reduce: filter-map vs push vs spread

Script Preparation code:

var length = 10000
var fillArray = new Array(length).fill(0).map((e, i) => i)

Tests:

filter-map
fillArray.filter(e => (e & 1) === 1).map(e => e+1)
push
fillArray.reduce((p, e) => { if (e & 1 === 1) p.push(e+1); return p; }, []);
reduce
fillArray.reduce((p, e) => { if (e & 1 === 1) return [...p, e]; return p; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter-map
push
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 Edg/97.0.1072.76

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
filter-map	22377.7 Ops/sec
push	30680.7 Ops/sec
reduce	143.5 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition and Script Preparation Code**

The provided benchmark definition represents a simple task: creating an array of length 10,000, filling it with zeros, and then applying different transformations to it. The script preparation code defines two arrays:

1. `fillArray`: A new array of length 10,000 filled with zeros using the `new Array(length).fill(0)` method.
2. `e`: An element in the `fillArray` that takes on values from 0 to 9,999, incrementing by 1 for each iteration.

**Individual Test Cases**

The benchmark consists of three individual test cases:

1. **filter-map**: This test case applies a filter function using the `filter()` method followed by a mapping function using the `map()` method.
2. **push**: This test case uses the `reduce()` method with an accumulator (`p`) to push elements onto it when the condition is met.
3. **reduce**: This test case uses the `reduce()` method with an accumulator (`p`) and returns the accumulated array with transformed elements.

**Comparison of Options**

The three options being compared are:

1. **filter-map**: This approach involves two separate methods, `filter()` and `map()`, which can be slower due to the overhead of function calls.
2. **push**: This approach uses a single method, `reduce()`, with an accumulator (`p`) that pushes elements onto it when the condition is met. This can be faster because it avoids the overhead of function calls.
3. **reduce**: This approach also uses a single method, `reduce()`, but without pushing elements onto an accumulator.

**Pros and Cons**

* **filter-map**:
	+ Pros: Easy to read and understand, as each step is separate and straightforward.
	+ Cons: May be slower due to the overhead of function calls.
* **push**:
	+ Pros: Can be faster because it avoids the overhead of function calls.
	+ Cons: Requires a single accumulator variable to store the transformed elements, which can lead to confusion if not managed properly.
* **reduce**:
	+ Pros: Efficient use of the `reduce()` method and avoids the need for an additional accumulator variable.
	+ Cons: May be less readable due to its concise nature.

**Library Usage**

None of the provided benchmark definitions rely on any external libraries. However, it's worth noting that some JavaScript engines might optimize certain operations (e.g., array manipulation) using built-in functions or native methods.

**Special JS Features/Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark definition.

**Alternatives**

MeasureThat.net provides a range of alternatives for testing different JavaScript scenarios, including:

1. Memory Benchmark: Tests memory allocation and deallocation.
2. Garbage Collection Benchmark: Measures the performance of garbage collection algorithms.
3. Function Call Overhead Benchmark: Evaluates the impact of function call overhead on performance.

These benchmarks can help developers understand how to optimize their code for specific use cases and JavaScript engines.

Related benchmarks:

Reduce: filter-map vs push vs spread (version: 0)

Comparing performance of: filter-map vs push vs reduce

Created: 3 years ago by: Guest

Jump to the latest result

filter-map

push

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