Benchmark: Array ops - for-each vs double map-filter

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {}

Tests:

For-Each
const exampleObjects = Array.from(Array(1000)).map((_, i) => { const randomId = Math.round(Math.random() * 100); const otherRandomId = Math.round(Math.random() * 100); return { objectId: i % 3 === 0 ? undefined : randomId.toString(), clientObjectId: i % 4 === 0 ? undefined : otherRandomId.toString(), } }); const objectIds = new Set(exampleObjects.map(i => i.objectId).filter(i => i !== undefined)); const clientObjectIds = new Set(exampleObjects.map(i => i.clientObjectId).filter(i => i !== undefined));
map + filter twice
const exampleObjects = Array.from(Array(1000)).map((_, i) => { const randomId = Math.round(Math.random() * 100); const otherRandomId = Math.round(Math.random() * 100); return { objectId: i % 3 === 0 ? undefined : randomId.toString(), clientObjectId: i % 4 === 0 ? undefined : otherRandomId.toString(), } }); const objectIds = new Set(); const clientObjectIds = new Set(); for (const i of exampleObjects) { if (i.objectId) objectIds.add(i.objectId); if (i.clientObjectId) clientObjectIds.add(i.clientObjectId); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For-Each
map + filter twice

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
For-Each	16738.5 Ops/sec
map + filter twice	20723.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark provided in the JSON consists of two different approaches to iterating over and processing an array of objects in JavaScript. The focus is on comparing two methodologies for retrieving unique identifiers from a list: using `Array.prototype.map` and `Array.prototype.filter` methods versus using a traditional `for...of` loop.

### Test Cases Overview

1. **For-Each**
   - This approach uses the `map` function two times, where the first maps to create an array of object identifiers (`objectId`), and the second filters out undefined values. The process results in the creation of a `Set`, which inherently provides unique values.
   - Example Code:
     ```javascript
     const exampleObjects = Array.from(Array(1000)).map((_, i) => {
       const randomId = Math.round(Math.random() * 100);
       const otherRandomId = Math.round(Math.random() * 100);
       return {
         objectId: i % 3 === 0 ? undefined : randomId.toString(),
         clientObjectId: i % 4 === 0 ? undefined : otherRandomId.toString(),
       };
     });
     const objectIds = new Set(exampleObjects.map(i => i.objectId).filter(i => i !== undefined));
     const clientObjectIds = new Set(exampleObjects.map(i => i.clientObjectId).filter(i => i !== undefined));
     ```

2. **map + filter twice (traditional for loop)**
   - This approach is more imperative and involves a single iteration over the array using the `for...of` loop. It checks each object's properties and adds valid identifiers to the respective `Set`.
   - Example Code:
     ```javascript
     const exampleObjects = Array.from(Array(1000)).map((_, i) => {
       const randomId = Math.round(Math.random() * 100);
       const otherRandomId = Math.round(Math.random() * 100);
       return {
         objectId: i % 3 === 0 ? undefined : randomId.toString(),
         clientObjectId: i % 4 === 0 ? undefined : otherRandomId.toString(),
       };
     });
     
     const objectIds = new Set();
     const clientObjectIds = new Set();
     
     for (const i of exampleObjects) {
       if (i.objectId) objectIds.add(i.objectId);
       if (i.clientObjectId) clientObjectIds.add(i.clientObjectId);
     }
     ```

### Performance Results

The benchmark results indicate the number of executions per second for each method:
- **map + filter twice**: 20,723 executions per second
- **For-Each**: 16,738 executions per second

### Pros and Cons

1. **For-Each (map + filter)**
   - **Pros**:
     - More declarative and concise, leading to potentially higher readability.
     - Makes good use of JavaScript's built-in array methods, which are optimized for performance in many engines.
   - **Cons**:
     - May involve more overhead due to the creation of intermediate arrays (especially noticeable in larger datasets), as it calls `map` and `filter` twice.
     - Each call results in garbage collection of the intermediate objects, which could diminish performance.

2. **map + filter (traditional for-loop)**
   - **Pros**:
     - More performant in terms of speed; single traversal of the dataset without creating intermediate arrays.
     - Reduces memory pressure since no additional arrays are generated beyond the final `Set`.
   - **Cons**:
     - More verbose; lacks the succinctness of functional programming styles.
     - Might seem less readable at first glance, especially for those less familiar with JavaScript's array manipulation methods.

### Other Considerations

- **Use Case Appropriateness**: Depending on the size and nature of the data, the selection between these methods might change. For small datasets, the impact on performance may not be significant, but with larger datasets, the efficiency of a single pass (as in the traditional `for...of`) become more advantageous.
- **Browser Optimization**: JavaScript engines within different browsers can optimize certain patterns more effectively. Continuous benchmarking across environments (like other browsers, or node.js) may yield different results.
- **Code Maintainability**: While performance is important, maintainability and code clarity should also be taken into consideration. A balance between performance and readability is often ideal in larger codebases.

### Alternatives

- **Reduce**: An alternative could be employing the `Array.prototype.reduce` method to achieve a similar result in a single traversal, accumulating results directly into the `Set`.
  ```javascript
  const objectIds = exampleObjects.reduce((set, obj) => {
    if (obj.objectId) set.add(obj.objectId);
    return set;
  }, new Set());
  ```

This benchmark illustrates key differences in approaches to processing data in JavaScript, emphasizing performance while highlighting readability and maintainability.

Related benchmarks:

Array ops - for-each vs double map-filter (version: 1)

Comparing performance of: For-Each vs map + filter twice

Created: one month ago by: Guest

Jump to the latest result

For-Each

map + filter twice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):