Benchmark: forEach vs filter nvmnghia 1812

HTML Preparation code:

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

Script Preparation code:

var statuses = ["active", "inactive", "nvmnghia", "bienpm"];
var data = Array.from({ length: 1_000 }, () => ({
  status: statuses[Math.floor(Math.random() * statuses.length)],
}));

Tests:

filter
const active = data.filter((item) => item.status === "active"); const inactive = data.filter((item) => item.status === "inactive"); const nvmnghia = data.filter((item) => item.status === "nvmnghia"); const bienpm = data.filter((item) => item.status === "bienpm"); return { active, inactive, nvmnghia, bienpm };
forEach
const active = []; const inactive = []; const nvmnghia = []; const bienpm = []; data.forEach((item) => { if (item.status === "active") active.push(item); else if (item.status === "inactive") inactive.push(item); else if (item.status === "nvmnghia") nvmnghia.push(item); else if (item.status === "bienpm") bienpm.push(item); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
filter	48437.8 Ops/sec
forEach	66977.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON compares two different JavaScript approaches for categorizing objects in an array based on their `status` property. The test cases are `forEach` and `filter`, and they analyze performance in terms of how many executions of each method can be completed per second.

### Options Compared

1. **forEach:**
   - **Implementation:** This approach utilizes the `Array.prototype.forEach` method, which iterates over each item in the `data` array and conditionally pushes items into separate arrays based on their `status` attribute.
   - **Code:**
     ```javascript
     const active = [];
     const inactive = [];
     const nvmnghia = [];
     const bienpm = [];
     
     data.forEach((item) => {
         if (item.status === "active") active.push(item);
         else if (item.status === "inactive") inactive.push(item);
         else if (item.status === "nvmnghia") nvmnghia.push(item);
         else if (item.status === "bienpm") bienpm.push(item);
     });
     ```
   
2. **filter:**
   - **Implementation:** This method makes use of the `Array.prototype.filter` function, creating a new array for each status type by filtering the `data` array for specific conditions.
   - **Code:**
     ```javascript
     const active = data.filter((item) => item.status === "active");
     const inactive = data.filter((item) => item.status === "inactive");
     const nvmnghia = data.filter((item) => item.status === "nvmnghia");
     const bienpm = data.filter((item) => item.status === "bienpm");
     ```

### Performance Results

- From the benchmark results:
   - The `forEach` approach registered approximately **251.75 executions per second**.
   - The `filter` approach showed about **129.82 executions per second**.
   
Clearly, the `forEach` method performed better than the `filter` method under the conditions tested.

### Pros and Cons of Approaches

#### forEach:
- **Pros:**
  - Generally faster in this scenario, as indicated by execution logged.
  - More control over the processing since you can execute additional operations within the loop.
  
- **Cons:**
  - Requires more boilerplate code (declaring multiple arrays and pushing items).
  - The intention of the operation is less clear since it involves multiple condition checks.

#### filter:
- **Pros:**
  - Concise and declarative. It clearly illustrates the intention of filtering based on a condition.
  - More readable and easier to maintain since the filtering logic is separated for each condition.

- **Cons:**
  - Slower performance in this benchmark scenario.
  - Generates multiple new arrays, which can be less efficient memory-wise, especially when dealing with large datasets.

### Other Considerations

- **Readability vs Performance:** While `forEach` is faster for this specific use case, the choice might depend on context. If performance is critical and the array is large, `forEach` is advantageous. However, if code clarity and maintainability are prioritized, `filter` may be preferable.

- **Memory Usage:** The `filter` method creates new arrays for every category, while `forEach` directly mutates existing arrays. This may be important for larger datasets or scenarios with limited memory.

### Alternatives

Several other alternatives could be considered for handling similar tasks:

1. **Reduce Method:**
   - You can also use `Array.prototype.reduce` to concurrently accumulate each category in a single iteration.
   - Example:
     ```javascript
     const { active, inactive, nvmnghia, bienpm } = data.reduce((acc, item) => {
         acc[item.status] = acc[item.status] || [];
         acc[item.status].push(item);
         return acc;
     }, {});
     ```

2. **Map/Grouping Libraries:**
   - Libraries like Lodash provide utilities such as `groupBy`, which can also categorize items based on a specified property with a single function.
   - Example using Lodash:
     ```javascript
     const groupedData = _.groupBy(data, 'status');
     ```

3. **Using a Simple Loop:**
   - A basic `for` loop can also be employed, providing fine-grained control over performance optimizations beyond the JavaScript built-ins.

In conclusion, the benchmark provides insight into different JavaScript methodologies for processing arrays, offering essential considerations for software engineers when selecting an approach for real-world applications.

Related benchmarks:

forEach vs filter nvmnghia 1812 (version: 3)

Comparing performance of: filter vs forEach

Created: 7 days ago by: Registered User

Jump to the latest result

filter

forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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