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

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: 9 months ago)

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	133.4 Ops/sec
flatMap()	175.8 Ops/sec
for loop	49.2 Ops/sec
forEach	223.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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: 9 months ago by: Guest

Jump to the latest result

filter().map()

flatMap()

for loop

forEach

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