Benchmark: flatMap() vs filter().map() vs for loop accumulator vs forEach

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => x % 30).map(x => x/100)
flatMap()
arr.flatMap(x => x % 30 ? x/100 : [])
for loop
var accum = []; for (let i=0; i < arr.length; i++) { const x = arr[i]; if (x % 30) { accum.push(x/100) } }
forEach
var accum = []; arr.forEach((x) => { if (x % 30){ accum.push(x/100) } })

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

forEach

331/s

flatMap()

247/s

filter().map()

204/s

for loop

61/s

Fastest: forEach (5.4x faster)

View exact numbers

✓ forEach: 331 ops/sec
• flatMap(): 247 ops/sec
• filter().map(): 204 ops/sec
• for loop: 61 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()
for loop
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

for loop

1K/s

forEach

813/s

flatMap()

582/s

filter().map()

468/s

View exact numbers

Test name	Executions per second
✓ for loop	1,442 Ops/sec
forEach	813 Ops/sec
flatMap()	582 Ops/sec
filter().map()	468 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing different approaches for various tasks.

**Benchmark Definition**

The benchmark defines four test cases:

1. `flatMap() vs filter().map()`: Compares the performance of `flatMap()` with a combination of `filter()` and `map()`.
2. `for loop accumulator`: Tests a traditional `for` loop approach using an accumulator.
3. `forEach`: Tests the performance of using `forEach()` to iterate over the array.
4. `filter().map()`: A control group, testing the performance of combining `filter()` and `map()`.

**Options Compared**

The benchmark compares four approaches:

1. **flatMap()**: Used in modern JavaScript, flattens an array by recursively applying a callback function to each element.
2. **Filter().Map()**: A traditional approach that first filters out unwanted elements using `filter()` and then maps the remaining elements using `map()`.
3. **For Loop Accumulator**: Uses a `for` loop with an accumulator to iterate over the array, filtering out unwanted elements.
4. **ForEach**: Uses `forEach()` to iterate over the array, filtering out unwanted elements.

**Pros and Cons**

Here's a brief summary of each approach:

1. **flatMap()**:
	* Pros: Efficient, modern JavaScript syntax.
	* Cons: Can be less readable for those unfamiliar with its usage.
2. **Filter().Map()**:
	* Pros: Readable, widely used in legacy codebases.
	* Cons: More verbose and slower than `flatMap()`.
3. **For Loop Accumulator**:
	* Pros: Easy to understand, no additional libraries required.
	* Cons: Less efficient, more verbose than other approaches.
4. **ForEach**:
	* Pros: Simple, doesn't require explicit loop logic.
	* Cons: Can be slower due to the need for iteration setup.

**Library Used**

In this benchmark, the `forEach()` method is used as part of the modern JavaScript standard library. No additional libraries are required.

**Special JS Feature or Syntax**

No special features or syntax are used in this benchmark beyond what's already covered by the options being compared.

**Other Considerations**

When choosing an approach, consider:

* Readability: Choose an approach that balances efficiency with maintainability.
* Performance: Consider the expected size and complexity of your data sets when selecting an approach.
* Compatibility: If you're targeting older browsers or environments, `Filter().Map()` might be a safer choice.

**Alternatives**

Other alternatives for similar tasks could include:

1. **Array.prototype.reduce()**: An efficient way to reduce an array using a callback function.
2. **Set operations**: Using `Set` and `filter()` can provide a concise solution in some cases.
3. **Regular expressions**: For more complex filtering or transformation, regular expressions might be suitable.

Keep in mind that the choice of approach depends on your specific use case and requirements.

flatMap() vs filter().map() vs for loop accumulator vs forEach (version: 0)

flatMap vs filter map

Comparing performance of: `filter().map() vs flatMap() vs for loop vs forEach`

Created: 2 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

for loop

forEach

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 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 for loop accumulator vs forEach (version: 0)

flatMap vs filter map

Comparing performance of: filter().map() vs flatMap() vs for loop vs forEach

Created: 2 years ago by: Guest

Go to the latest result

filter().map()

flatMap()

for loop

forEach

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 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 for loop vs forEach`