Benchmark: map filter vs reduce concat

Script Preparation code:

var arr = [];
for (var i = 0; i < 12345; i++) {
    arr[i] = i > 2 ? 1 : i
}

Tests:

.map.filter
arr.filter((a) => a === 1).map(() => 'wow')
.reduce
arr.reduce((acc, a) => a === 1 ? acc.concat(a) : acc, [])

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: 4 years ago)

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

Browser/OS: Chrome 83 on Windows

View result in a separate tab

Test name	Executions per second
.map.filter	2821.5 Ops/sec
.reduce	1.9 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.

**Benchmark Definition**

The provided JSON represents a benchmark that tests the performance difference between two approaches: using `map` and filtering, versus using `reduce`.

In the "Script Preparation Code", an array `arr` is created with 12,345 elements. The array is then populated with values based on a condition: if the index `i` is greater than 2, the value is set to 1; otherwise, it's set to the current index `i`.

**Options Compared**

Two approaches are compared:

1. **`.map.filter`**: This approach uses the `map()` method to create a new array with the desired values (in this case, elements where `a === 1`) and then filters out unwanted elements using the `filter()` method.
2. **`.reduce`**: This approach uses the `reduce()` method to accumulate an array of desired values from the original array.

**Pros and Cons**

**`.map.filter`**

Pros:

* Easy to understand and implement
* Provides a new array with filtered values, which can be useful for further processing

Cons:

* Creates a new array, which can lead to increased memory usage
* Iterates over the entire array twice (once for `map()` and once for `filter()`)

**`.reduce`**

Pros:

* Only iterates over the original array once
* Accumulates values in a single pass, reducing memory allocation

Cons:

* Can be less intuitive to read and implement, especially for those without experience with accumulator patterns
* May require additional logic to handle edge cases (e.g., what happens when there's no initial value?)

**Library Usage**

None of the provided code uses any external libraries.

**Special JavaScript Features or Syntax**

There are no special JavaScript features or syntax used in these benchmarks. They focus on demonstrating the performance difference between two approaches.

**Other Alternatives**

If you wanted to test other approaches, here are a few possibilities:

* Using `forEach()` instead of `map()`
* Using a loop with conditional statements (e.g., `if-else` chain)
* Using a different sorting or filtering algorithm (e.g., `sort()` or `Array.prototype.every()`)
* Adding more elements to the array and measuring performance

Keep in mind that the choice of alternative approaches will depend on your specific use case and requirements.

If you have any further questions or would like me to explain anything in more detail, feel free to ask!

Related benchmarks:

map filter vs reduce concat (version: 0)

Show time vs space complexity of either solution

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