Benchmark: double-filter vs foreach vs for

Script Preparation code:

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

Tests:

double filter
const a = arr.filter(i => i.is_group) const b = 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) } })
for
const a = []; const b = []; for(i=0; i<1000; i++){ if (arr[i].is_group) { a.push(arr[i]) } else { b.push(arr[i]) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
double filter
forEach
for

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
double filter	69860.8 Ops/sec
forEach	77031.6 Ops/sec
for	4392.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The test compares the performance of three different approaches for filtering an array: `double-filter`, `forEach`, and `for`. In this explanation, I'll break down each approach, its pros and cons, and other considerations.

**Approaches**

### 1. Double-Filter

```javascript
const a = arr.filter(i => i.is_group)
const b = arr.filter(i => !i.is_group)
```

*   This approach uses the `filter()` method twice to separate groups into two arrays (`a` and `b`). The first filter returns all elements with `is_group` set to `true`, and the second filter returns all elements with `is_group` set to `false`.
*   Pros:

*   Simple and concise code.
    *   No explicit loops or indexing required.

*   Cons:

*   Two array operations, which can lead to increased memory allocation and deallocation overhead.
    *   Potential performance impact due to the repeated use of `filter()` method.

### 2. For Each

```javascript
arr.forEach(i => {
  if (i.is_group) {
    a.push(i)
  } else {
    b.push(i)
  }
})
```

*   This approach uses the `forEach()` method to iterate over the array and push elements into two separate arrays (`a` and `b`) based on their `is_group` property.
*   Pros:

*   Only one loop is used, which can lead to better performance compared to using multiple filters.
    *   Flexibility in handling each element individually.

*   Cons:

*   More verbose code due to the need for an explicit loop and conditional statements.
    *   Potential issues with array indices if not handled carefully.

### 3. For Loop

```javascript
for (i = 0; i < 1000; i++) {
  if (arr[i].is_group) {
    a.push(arr[i])
  } else {
    b.push(arr[i])
  }
}
```

*   This approach uses a traditional `for` loop to iterate over the array and push elements into two separate arrays (`a` and `b`) based on their `is_group` property.
*   Pros:

*   Simple and straightforward code.
    *   No reliance on methods like `forEach()` or `filter()`, which can be beneficial in certain scenarios.

*   Cons:

*   More complex indexing logic due to the need for explicit loop iteration.
    *   Potential issues with array indices if not handled carefully.

**Library**

The provided benchmark test case uses no external libraries. The test is self-contained and relies only on native JavaScript features.

**Special JS Features or Syntax**

None of the approaches in this benchmark require any special JavaScript features or syntax beyond what's available in standard ECMAScript implementations. However, it's worth noting that specific browser versions (e.g., Chrome 87) are used to execute these tests, which may have some built-in optimizations or differences compared to other browsers.

**Other Alternatives**

While the three approaches mentioned above cover common scenarios for filtering an array, here are a few additional alternatives:

*   **Array.prototype.every()**: This method can be used instead of `filter()` and is often more concise. However, it only returns true if all elements pass the test, whereas `filter()` allows for returning any number of elements.
*   **Array.prototype.some()`: Similar to `every()`, but it returns as soon as at least one element passes the test.

Keep in mind that performance differences between these approaches can vary depending on specific use cases and the size of the data being processed.

Related benchmarks:

double-filter vs foreach vs for (version: 0)

Comparing performance of: double filter vs forEach vs for

Created: 3 years ago by: Guest

Jump to the latest result

double filter

forEach

for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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