Benchmark: filter vs foreach

Script Preparation code:


var arr = [];
for(i=0; i<100; i++){
  Math.random() > .5 ? arr.push({is_group: true}) : arr.push({is_group: false})
}

Tests:

filter
const a = arr.filter(i => i.is_group)
forEach
const a = []; const b = []; arr.forEach(i => { if (i.is_group) { a.push(i) } else { b.push(i) } })

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: 3 years ago)

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

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter	3694519.0 Ops/sec
forEach	2513979.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore the JavaScript microbenchmark you provided.

**Benchmark Definition**

The benchmark is designed to compare two approaches: using the `filter()` method versus iterating over an array using the `forEach` loop with conditional statements. The goal is to determine which approach is faster for this specific use case.

**Script Preparation Code**

The script preparation code generates a random array of 100 elements, where each element has either `is_group` property set to `true` or `false`. This setup ensures that the benchmark is running on a consistent dataset.

```javascript
var arr = [];
for (i = 0; i < 100; i++) {
  Math.random() > .5 ? arr.push({ is_group: true }) : arr.push({ is_group: false });
}
```

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark only focuses on JavaScript execution time.

**Individual Test Cases**

The benchmark consists of two test cases:

1. **Filter**: Uses the `filter()` method to create a new array with elements that match the condition `{is_group: true}`.
```javascript
const a = arr.filter(i => i.is_group);
```

2. **ForEach**: Iterates over the original array using `forEach`, pushing elements with `is_group` set to `true` into one array and elements with `false` into another.
```javascript
const b = [];
arr.forEach(i => {
  if (i.is_group) {
    a.push(i);
  } else {
    b.push(i);
  }
});
```

**Library**

In this benchmark, no specific JavaScript library is used. However, it's worth noting that the `forEach` method has been a standard part of the ECMAScript specification since ES5.

**Special JS Feature or Syntax**

There are two minor points to mention:

* The use of arrow functions (`i => i.is_group`) in both test cases. While not specific to this benchmark, it's worth noting that arrow functions were introduced in ECMAScript 2015 (ES6).
* The `const` keyword is used for variable declarations and assignments throughout the benchmark.

**Pros and Cons**

Here's a brief overview of the pros and cons of each approach:

1. **Filter**:
	* Pros: concise, readable, and easy to maintain.
	* Cons: may have higher overhead due to the creation of a new array.
2. **ForEach**:
	* Pros: allows for more control over the iteration process, potentially reducing overhead.
	* Cons: can be less readable and more verbose than the `filter` approach.

In this specific benchmark, both approaches have their trade-offs, but the `forEach` method may provide a slight performance advantage due to its ability to modify the original array.

**Other Alternatives**

If you're interested in exploring alternative approaches or comparing different JavaScript libraries, here are some options:

* **Map**: Similar to `filter`, but returns an iterator instead of a new array.
* **Reduce**: Another iteration method that can be used for similar use cases.
* **Array.prototype.every()`: A more concise way to check if all elements in the array satisfy a condition.

Keep in mind that these alternatives may not always provide significant performance advantages over `filter` and `forEach`.

I hope this explanation helps you understand the JavaScript microbenchmark provided by MeasureThat.net!

Related benchmarks:

filter vs foreach (version: 0)

Comparing performance of: filter vs forEach

Created: 3 years ago by: Guest

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 llama3.2:3b, generated 2 months ago):