Benchmark: forEach vs filter().map() vs map().filter()

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = { i, extra: Math.random() < 0.5 ? null : 'test' };
}

Tests:

forEach
var newArr = []; arr.forEach((x) => { if (x.extra !== null) { newArr.push({ ...x, extra: x.extra + '!' }); } });
filter.map
var newArr = arr .filter((x) => x.extra !== null) .map((x) => ({ ...x, extra: x.extra + '!' }));
map.filter
var newArr = arr .map((x) => ({ ...x, extra: x.extra + '!' })) .filter((x) => x.extra !== null)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
filter.map
map.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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach	36713.3 Ops/sec
filter.map	40092.0 Ops/sec
map.filter	16445.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined by the JSON tests the performance of three different approaches for processing an array of objects in JavaScript, each with the aim of filtering and transforming that data based on certain conditions. Specifically, the benchmark compares:

1. **forEach**: This method involves manually constructing a new array by iterating through the original array using `forEach` and applying a conditional push to populate the new array.

2. **filter().map()**: This approach first filters the original array to keep only the objects where the `extra` property is not null and then maps it to create a new array by modifying the `extra` property.

3. **map().filter()**: In this case, the map method is executed first to transform each object in the original array before filtering out those objects with a null `extra` property.

### Performance Results
The benchmark results show the number of executions per second for each method:

- **filter.map**: **86,660.04 executions/sec**
- **forEach**: **77,615.73 executions/sec**
- **map.filter**: **35,062.04 executions/sec**

### Analysis of Options

#### 1. forEach
- **Pros**:
  - Offers flexibility; you have full control over how to construct the new array.
  - May be more readable when dealing with complex conditions or transformations.
  
- **Cons**:
  - Slightly lower performance in this benchmark context.
  - It requires manual management of the new array, which can lead to errors if not handled carefully.

#### 2. filter().map()
- **Pros**:
  - Often more readable and expressive; it clearly represents the intent of filtering followed by transformation.
  - Since it handles filtering first, it can potentially lead to fewer items being processed during the mapping phase, enhancing performance.
  
- **Cons**:
  - Two iterations over the data—once for filtering and once for mapping—which could be less efficient for very large arrays.

#### 3. map().filter()
- **Pros**:
  - Can be more concise in certain scenarios, especially where you're primarily transforming the array.
  
- **Cons**:
  - The first `map` call creates a new array of objects regardless of whether they satisfy the filter condition, which can lead to larger intermediate arrays.
  - Lower performance in this specific benchmark suggesting it is the least optimal approach among the three here.

### Other Considerations
- **Library Usage**: No external libraries are specified in the provided JSON. The benchmark utilizes standard JavaScript array methods, such as `forEach`, `map`, and `filter`, which are built-in features of the JavaScript language.
  
- **JavaScript Features**: The benchmark does not utilize any special JavaScript features or syntax outside of the standard array methods already discussed.

### Alternatives
1. **Reduce Method**: Another approach could involve using the `reduce` method, which can combine both filtering and mapping into a single iteration. For example, you can initialize a new array during `reduce` based on the filtering condition.

2. **Manual Looping**: Using traditional `for` or `while` loops could provide more fine-grained control over performance, especially when optimization is crucial. For simple cases, this might yield similar results to `forEach` or `map/.filter`.

3. **Libraries and Frameworks**: While no external libraries are used here, libraries like Lodash provide utilities that may optimize array manipulations and offer more concise syntax.

Each of these alternatives could be compared in a similar benchmark to assess performance and clarity depending on specific use cases and data characteristics.

Related benchmarks:

forEach vs filter().map() vs map().filter() (version: 0)

Comparing performance of: forEach vs filter.map vs map.filter

Created: one year ago by: Guest

Jump to the latest result

forEach

filter.map

map.filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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