Benchmark: .map().filter() vs .reduce vs .foreach()

Script Preparation code:

var array = [];
for (var i = 0; i < 10000; i++) {
  array[i] = i;
}

var firstTestResults = [];
var secondTestResults = [];
var thirdTestResults = [];

Tests:

.map().filter()
firstTestResults = array.map(value => { return value + 10; }) .filter(value => { return value % 2 === 0; });
.reduce()
secondTestResults = array.reduce((acc, value) => { value = value + 10; if (value % 2 === 0) { acc.push(value); } return acc; }, []);
.forEach()
array.forEach(value => { value = value + 10; if (value % 2 === 0) { thirdTestResults.push(value); } })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.map().filter()
.reduce()
.forEach()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

Test name	Executions per second
.map().filter()	8465.0 Ops/sec
.reduce()	16780.2 Ops/sec
.forEach()	5070.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is being tested in each benchmark.

**Benchmark Definition**

The main difference between `.map()`, `.reduce()`, and `.forEach()` is how they handle the data and return values.

* `.map()` creates a new array with transformed values. It takes an optional callback function that defines the transformation.
* `.reduce()` applies a reduction operation to an accumulator, returning a single value. It also takes an optional callback function that defines the reduction operation.
* `.forEach()` executes a provided function once for each element in an array, but does not return any value.

**Options Compared**

The benchmark is comparing these three approaches:

1. `.map() + .filter()`: This combination of methods creates a new array with transformed values and then filters out elements that don't meet the condition.
2. `.reduce()`: This method applies a reduction operation to an accumulator, returning a single value.
3. `.forEach()`: This method executes a function once for each element in an array, but does not return any value.

**Pros and Cons**

* `.map() + .filter()`:
	+ Pros: Can be faster because it uses optimized implementations of `map` and `filter`.
	+ Cons: Creates a new array with transformed values, which can consume more memory.
* `.reduce()`:
	+ Pros: Can be more efficient than the other two methods because it avoids creating a new array.
	+ Cons: Returns a single value, whereas the other two methods return arrays or modified arrays.
* `.forEach()`:
	+ Pros: Does not return any value, which can be beneficial for performance-critical code.
	+ Cons: Does not provide an easy way to access the results of the operation.

**Library Usage**

None of the provided benchmarks use external libraries. However, some browsers may have built-in optimizations or polyfills that affect the benchmarking results.

**Special JS Features**

The benchmark uses a syntax feature called "template literals" (`value => { ... }`), which allows for more concise and readable code. This is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

Some alternative approaches to these methods include:

* Using `Array.prototype.every()` instead of `.filter()`: `array.filter(value => value % 2 === 0).every(value => ...)`.
* Using `Array.prototype.reduce()` with an initial accumulator value: `array.reduce((acc, value) => acc + value, 0)`.

However, these alternatives may not be as concise or expressive as the original methods, and may not provide the same performance benefits.

Related benchmarks:

.map().filter() vs .reduce vs .foreach() (version: 2)

Comparing performance of: .map().filter() vs .reduce() vs .forEach()

Created: 5 years ago by: Registered User

Jump to the latest result

.map().filter()

.reduce()

.forEach()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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