Benchmark: flatmap vs reduce to filter undefined elements

Script Preparation code:

const myArray = [];

for (let i = 0; i < 10000; i++) {
  const obj = {
    prop1: `value${i}_1`,
    prop2: `value${i}_2`,
    prop3: `value${i}_3`,
    prop4: `value${i}_4`,
  };

  // Randomly add the metadata property
  if (Math.random() < 0.5) {
    obj.metadata = {
      info1: `metadata${i}_1`,
      info2: `metadata${i}_2`,
    };
  }

  myArray.push(obj);
}

Tests:

flatMap
myArray.flatMap(obj => { if (obj.metadata) { return { prop1: obj.prop1, metadata: obj.metadata }; } else { return []; } })
reduce
myArray.reduce((acc, obj) => { if (obj.metadata) { acc.push({ prop1: obj.prop1, metadata: obj.metadata }); } return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatMap	6599.3 Ops/sec
reduce	11529.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 days ago):

LLMs can make mistakes. Check important info.

The benchmark titled **"flatmap vs reduce to filter undefined elements"** tests the performance of two different approaches for processing an array of objects in JavaScript: using the `flatMap` method versus the `reduce` method.

### Description and Purpose of Each Method

1. **`flatMap` Method**
   - **Benchmark Definition:** 
     ```javascript
     myArray.flatMap(obj => {
       if (obj.metadata) {
         return { prop1: obj.prop1, metadata: obj.metadata };
       } else {
         return [];
       }
     })
     ```
   - **Functionality:** 
     The `flatMap` method is used to first map each element to a new value and then flatten the result into a single array. Here, it checks if an object has a `metadata` property. If it does, it creates a new object containing `prop1` and `metadata`. If it does not, it returns an empty array. This effectively filters out objects without metadata and combines the results into one array.
   - **Pros:**
     - Cleaner and more concise syntax for transforming and flattening arrays.
     - Directly performs both mapping and filtering in one step.
   - **Cons:**
     - May have performance overhead due to the internal array flattening.

2. **`reduce` Method**
   - **Benchmark Definition:**
     ```javascript
     myArray.reduce((acc, obj) => {
       if (obj.metadata) {
         acc.push({ prop1: obj.prop1, metadata: obj.metadata });
       }
       return acc;
     }, []);
     ```
   - **Functionality:**
     The `reduce` method accumulates values by iterating over the array. It uses an accumulator that starts as an empty array and pushes new objects into it if the current object has `metadata`. 
   - **Pros:**
     - Very flexible; can be used to perform a variety of different reductions, not just filtering.
     - No need for flattening since the accumulation is directly pushed into the resulting array.
   - **Cons:**
     - Potentially more complex and less readable for straightforward mapping/filtering tasks compared to `flatMap`.

### Benchmark Results
- The benchmark results showcase the number of executions per second for each method:
  - **`reduce`:** 11529.62 executions/second
  - **`flatMap`:** 6599.29 executions/second
  
From these results, it is clear that the `reduce` method performed significantly better than the `flatMap` method in this particular context.

### Other Considerations and Alternatives
- **Context and Usage:** 
  The choice between `flatMap` and `reduce` can depend on the specific requirements of the function you are implementing, including the need for clarity versus performance.
- **Alternatives:** 
  Other alternatives for handling similar operations could include:
  - **`filter` followed by `map`:** If readability is more important and the transformations are separate, you can use `filter` to remove unneeded elements first and then use `map` to transform the remaining ones. However, this approach involves multiple iterations over the array, which may not be as performance-efficient as the original methods.
  - **For loop:** A traditional `for` loop can be employed for full control over performance and efficiency, as it avoids the abstractions of functional methods. However, it can sacrifice readability and require more boilerplate code.
  
In terms of library usage, the benchmark does not leverage any external libraries; it strictly uses native JavaScript methods. Both `flatMap` and `reduce` are built-in methods for arrays in JavaScript.

These benchmarks are useful for understanding how different JavaScript methods can affect performance when processing large datasets, ultimately guiding developers in their approach to data manipulation in JavaScript applications.

Related benchmarks:

flatmap vs reduce to filter undefined elements (version: 1)

Comparing performance of: flatMap vs reduce

Created: 15 days ago by: Guest

Jump to the latest result

flatMap

reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 days ago):