Benchmark: flatMap() vs filter().map() vs foreach and push

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;

Tests:

filter().map()
var result = arr.filter(x => x % 3).map(x => x/100)
flatMap()
var result = arr.flatMap(x => x % 3 ? x/100 : [])
foreach & push
var result = []; arr.forEach(x => { if (x%3) { result.push(x/100) } })

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 16 runs

foreach & push

903/s

flatMap()

615/s

filter().map()

542/s

Fastest: foreach & push (1.7x faster)

View exact numbers

✓ foreach & push: 903 ops/sec
• flatMap(): 615 ops/sec
• filter().map(): 542 ops/sec

Firefox 8 runs

foreach & push

1K/s

filter().map()

776/s

flatMap()

702/s

Fastest: foreach & push (1.6x faster)

View exact numbers

✓ foreach & push: 1,106 ops/sec
• filter().map(): 776 ops/sec
• flatMap(): 702 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()
foreach & push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 148 on Windows

View result in a separate tab

foreach & push

1K/s

filter().map()

773/s

flatMap()

681/s

View exact numbers

Test name	Executions per second
✓ foreach & push	1,127 Ops/sec
filter().map()	773 Ops/sec
flatMap()	681 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 benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for flattening an array in JavaScript:

1. `flatMap()`: A method introduced in ECMAScript 2019 (ES2020) that flattens an array by mapping over each element and returning an array of the mapped values.
2. `filter().map()`: A combination of two methods, `filter()` and `map()`, which is a common approach for achieving the same result as `flatMap()`.
3. `foreach` loop with `push()`: An iterative approach using a `forEach` loop to iterate over the array elements and pushing each element's transformed value into a new array.

**Options Compared**

The three options are compared in terms of performance, which is measured by the number of executions per second.

* **flatMap()**: This option uses the built-in `flatMap()` method, which is likely to be optimized for performance.
* **filter().map()**: This option uses two separate methods, `filter()` and `map()`, which may incur additional overhead due to function calls and array modifications.
* **foreach` loop with `push()`: This option uses an iterative approach, which can be slower than the other two options since it involves manual array manipulation.

**Pros and Cons**

Here's a brief summary of each approach:

* **flatMap()**: Pros:
	+ Optimized for performance
	+ Concise syntax
	Cons:
	+ Requires ES2020 support (older browsers may not work)
* **filter().map()**: Pros:
	+ Widely supported across browsers and platforms
	+ Easy to understand and implement
Cons:
	+ May incur additional overhead due to function calls and array modifications
* **foreach` loop with `push()`: Pros:
	+ No dependencies on modern JavaScript features (works in older browsers)
	+ Can be easily customized for specific use cases
Cons:
	+ Inefficient in terms of performance compared to the other two options

**Library Usage**

None of the benchmarked methods explicitly require a library, but they may rely on built-in functionality provided by modern JavaScript engines.

**Special JS Features or Syntax**

* **flatMap()**: Requires ES2020 support, which introduces a new method for flattening arrays.
* No special features or syntax are used in the `foreach` loop with `push()` approach, as it's an iterative implementation that doesn't rely on any specific JavaScript features.

**Other Alternatives**

For achieving similar results without using the `flatMap()` method:

* **Array.prototype.reduce()**: Can be used to flatten arrays by reducing over the array elements.
* **Array.prototype.forEach()**: Can be used with a custom callback function to achieve similar results as the `foreach` loop with `push()`.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the benchmarked options.

flatMap() vs filter().map() vs foreach and push (version: 0)

flatMap vs filter map

Comparing performance of: `filter().map() vs flatMap() vs foreach & push`

Created: 3 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

foreach & push

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 16 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

flatMap() vs filter().map() vs foreach and push (version: 0)

flatMap vs filter map

Comparing performance of: filter().map() vs flatMap() vs foreach & push

Created: 3 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

foreach & push

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 16 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `filter().map() vs flatMap() vs foreach & push`