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)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

filter.map

89K/s

forEach

82K/s

map.filter

38K/s

Fastest: filter.map (2.4x faster)

View exact numbers

✓ filter.map: 88,925 ops/sec
• forEach: 82,486 ops/sec
• map.filter: 37,641 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

filter.map

40K/s

forEach

37K/s

map.filter

16K/s

View exact numbers

Test name	Executions per second
✓ filter.map	40,092 Ops/sec
forEach	36,713 Ops/sec
map.filter	16,445 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.

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

Go to the latest result

forEach

filter.map

map.filter

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

forEach

filter.map

map.filter

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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