Benchmark: flatMap() vs map().filter() v1

Script Preparation code:

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

Tests:

map().filter()
arr.map(x => x/10).filter(x => x % 3)
flatMap()
arr.flatMap(x => { const next = x/100; return next % 3 ? [next] : []})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map().filter()
flatMap()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 98 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map().filter()	165.7 Ops/sec
flatMap()	52.5 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two methods for processing arrays in JavaScript:

**Method 1: `map().filter()`**

* **Description:**  This approach first uses the `map()` method to transform each element in the array by dividing it by 10. Then, it uses the `filter()` method to keep only those elements that are not divisible by 3 when divided by the result of the division by 10.

* **Pros:**
    * Widely understood and commonly used pattern.
    *  Can be easier to read for beginners as it's a more sequential approach.

* **Cons:** Can potentially be less efficient than `flatMap()` because it involves two separate array operations. The intermediate array created by `map()` might consume extra memory.

**Method 2: `flatMap()`**

* **Description:** This approach uses the `flatMap()` method, which combines mapping and filtering into a single operation. It iterates through the array, divides each element by 100, and only includes elements in the resulting array if the result is not divisible by 3.

* **Pros:**
    * More concise and potentially more efficient than `map().filter()`, especially when dealing with large arrays.  It avoids creating an intermediate array, reducing memory usage.

* **Cons:**
   * Can be slightly less readable for beginners who are unfamiliar with `flatMap()`.

**Libraries Used:** None specifically mentioned in the provided code.

**Special JS Features/Syntax:** `map()`, `filter()`, and `flatMap()` are built-in methods in JavaScript for array manipulation.

**Alternatives:**
* **Manual Iteration:** You could achieve similar results by using a traditional `for` loop to iterate through the array, perform the calculations, and filter elements manually. However, this approach is typically less efficient and more verbose than using higher-order array methods like those tested here.

Let me know if you have any other questions!

Related benchmarks:

flatMap() vs map().filter() v1 (version: 0)

flatMap vs filter map

Comparing performance of: map().filter() vs flatMap()

Created: 2 years ago by: Guest

Jump to the latest result

map().filter()

flatMap()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):