Benchmark: filtering out objects with flatmap vs filter

Script Preparation code:

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

Tests:

flatMap
components = [ {__typename: 'ComponentDomainPagesCollectionGrid', test: 'test'}, {__typename: 'ComponentDomainArticlesCollectionGrid', test: 'test'}, {__typename: 'ComponentDomainEventsCollectionGrid', test: 'test'}, {__typename: 'DontListThisOne', test: 'test'}, {__typename: 'Also this', test: 'test'}, ] components.flatMap(c => { return c?.__typename === 'ComponentDomainPagesCollectionGrid' || c?.__typename === 'ComponentDomainArticlesCollectionGrid' || c?.__typename === 'ComponentDomainEventsCollectionGrid' ? [c] : [] })
filter
components = [ {__typename: 'ComponentDomainPagesCollectionGrid', test: 'test'}, {__typename: 'ComponentDomainArticlesCollectionGrid', test: 'test'}, {__typename: 'ComponentDomainEventsCollectionGrid', test: 'test'}, {__typename: 'DontListThisOne', test: 'test'}, {__typename: 'Also this', test: 'test'}, ] components.filter(c => { return c?.__typename === 'ComponentDomainPagesCollectionGrid' || c?.__typename === 'ComponentDomainArticlesCollectionGrid' || c?.__typename === 'ComponentDomainEventsCollectionGrid' })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
filter

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/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatMap	1740924.1 Ops/sec
filter	5168036.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and test cases.

**Benchmark Definition Overview**

The `filtering out objects with flatMap vs filter` benchmark compares the performance of two approaches: `flatMap` and `filter`. Both approaches are used to filter an array of objects based on a certain condition. The main difference between them lies in how they handle arrays within the filtered results.

**Options Compared**

1. **flatMap**: This method returns a new array with all subarrays from the original array, or an empty array if no subarray is found.
2. **filter**: This method returns a new array with all elements that pass the test implemented by the provided function.

**Pros and Cons of Each Approach**

* `flatMap`:
	+ Pros: More concise and expressive code, handles arrays within filtered results elegantly.
	+ Cons: Can be slower due to the creation of a new array, especially for large inputs.
* `filter`:
	+ Pros: Generally faster than `flatMap`, as it doesn't create a new array.
	+ Cons: Code can become more verbose and less expressive.

**Library Used**

The benchmark definition uses the `__typename` property, which is typically used in GraphQL schema definitions to indicate the type of an object. In this case, it's used to filter objects based on their `__typename` value.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in these test cases. The code is standard ECMAScript and uses only built-in methods like `flatMap`, `filter`, and array indexing.

**Other Considerations**

When deciding between `flatMap` and `filter`, consider the specific use case and performance requirements of your application. If you need to handle arrays within filtered results or want more concise code, `flatMap` might be a better choice. However, if speed is crucial and you don't need to process arrays within filtered results, `filter` could be a better option.

**Alternatives**

Other alternatives for filtering arrays in JavaScript include:

* Using the `forEach` method with a callback function that returns a boolean value indicating whether an element should be included in the result.
* Using the `every` and `some` methods to filter arrays based on multiple conditions.
* Using third-party libraries like Lodash, which provides various filtering functions.

Keep in mind that these alternatives might have their own performance characteristics and trade-offs compared to `flatMap` and `filter`.

Related benchmarks:

filtering out objects with flatmap vs filter (version: 0)

flatMap vs filter map

Comparing performance of: flatMap vs filter

Created: one year ago by: Guest

Jump to the latest result

flatMap

filter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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