Benchmark: reduce vs. filter + map vs. forEach - list 20m

Script Preparation code:

function createTeamList(n) {
    var teamList = Array(n);
    for (var i = 0; i < n; i++){
        teamList[i] = {
            id: i,
            isSelected: true,
            name: `team ${i}`
        }
    }
    return teamList;
}

var searchableTeamList = createTeamList(20000000);

Tests:

reduce
const selectedTeamIds = searchableTeamList.reduce((ids, team) => { if (team.isSelected) { ids.push(team.id) } return ids; }, []);
filter+map
const selectedTeamIds = searchableTeamList.filter((team) => team.isSelected)?.map((team) => team.id);
forEach
const selectedTeamIds = []; searchableTeamList.forEach((team) => { if (team.isSelected) { selectedTeamIds.push(team.id) } });
for...of
const selectedTeamIds = []; for (const team of searchableTeamList) { if (team.isSelected) { selectedTeamIds.push(team.id) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
filter+map
forEach
for...of

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to extract the IDs of selected teams from a large list of team objects:

1. `reduce()`
2. `filter()` + `map()`
3. `forEach()` (with a for loop)
4. `for...of` loop

The input data is a list of 20 million team objects, each with an `id`, `isSelected`, and `name` property.

**Script Preparation Code**

The script preparation code creates the large list of team objects using two functions:

1. `createTeamList(n)`: generates an array of `n` team objects.
2. `searchableTeamList = createTeamList(20000000);`

This function is used as input data for all test cases.

**Html Preparation Code**

There is no HTML preparation code provided, which means the benchmark focuses solely on JavaScript performance.

**Individual Test Cases**

Each test case measures the performance of one specific approach:

1. `reduce()`: uses the `Array.prototype.reduce()` method to iterate over the team list and extract IDs.
2. `filter()` + `map()`: uses the `Array.prototype.filter()` method to remove unselected teams, followed by the `Array.prototype.map()` method to extract IDs from selected teams.
3. `forEach()` (with a for loop): uses the `Array.prototype.forEach()` method to iterate over the team list and push IDs of selected teams into an array.
4. `for...of` loop: uses the `for...of` loop syntax to iterate over the team list and extract IDs from selected teams.

**Library Used**

None, as all test cases use native JavaScript methods and properties.

**Special JS Feature or Syntax**

The `for...of` loop syntax is a modern JavaScript feature introduced in ECMAScript 2015. It allows iterating over arrays without an explicit index variable.

Now, let's discuss the pros and cons of each approach:

1. `reduce()`: efficient for cumulative computations, but can be slower for small inputs due to the overhead of accumulating intermediate results.
2. `filter()` + `map()`: can be slower than `reduce` because it involves two separate array operations, which incur additional overhead.
3. `forEach()` (with a for loop): uses more memory and has higher overhead compared to `reduce`, but is still relatively efficient due to its simplicity.
4. `for...of` loop: similar to `forEach()`, but with the added benefit of being syntactic sugar for iteration.

**Other Alternatives**

For this specific benchmark, alternative approaches could include:

1. Using `Array.prototype.forEach()` only, without accumulating IDs in an array (which would be faster).
2. Using a custom, hand-rolled loop instead of the built-in `forEach` or `for...of` loops.
3. Using a different data structure, such as a `Map`, to store and retrieve team IDs.

However, these alternatives might not yield significant performance gains for this particular benchmark, as the input size is already quite large (20 million teams).

Related benchmarks:

reduce vs. filter + map vs. forEach - list 20m (version: 0)

Comparing performance of: reduce vs filter+map vs forEach vs for...of

Created: 2 years ago by: Registered User

Jump to the latest result

reduce

filter+map

forEach

for...of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):