Benchmark: filter vs foreach loop test performance

Script Preparation code:

var a = [
  {id: 1, title: 'a1', key_a: 'key_a1'},
  {id: 2, title: 'a2', key_a: 'key_a2'},
  {id: 3, title: 'a3', key_a: 'key_a3'},
  {id: 4, title: 'a4', key_a: 'key_a4'},
];
var b = [
  {id: 1, title: 'b1', key_b: 'key_b1'},
  {id: 1, title: 'b11', key_b: 'key_b11'},
  {id: 2, title: 'b2', key_b: 'key_b2'},
  {id: 2, title: 'b22', key_b: 'key_b22'},
  {id: 5, title: 'b5', key_b: 'key_b5'},
];
var filterSomeMapResult = [],
    filterFindMapResult = [],
    forEachResult = [],
    forEachPushResult = [];

console.log('filterSomeMapResult', filterSomeMapResult);
console.log('filterFindMapResult', filterFindMapResult);
console.log('forEachResult', forEachResult);
console.log('forEachPushResult', forEachPushResult);

Tests:

filter+some+map
filterSomeMapResult = b .filter(bItem => a.some(aItem => aItem.id == bItem.id)) .map(item => ({ ...item, ...a.find(aItem => aItem.id === item.id) }))
filter+find+map
filterFindMapResult = b .filter(bItem => a.find(aItem => aItem.id == bItem.id)) .map(item => ({ ...item, ...a.find(aItem => aItem.id === item.id) }))
forEach
b.forEach(bItem => { const x = a.find(aItem => aItem.id == bItem.id); if(x) { forEachResult = [...forEachResult, { ...bItem, ...x }] } })
forEach+push
b.forEach(bItem => { const x = a.find(aItem => aItem.id == bItem.id); if(x) { forEachPushResult.push({ ...bItem, ...x }) } })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter+some+map
filter+find+map
forEach
forEach+push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.0.1

View result in a separate tab

Test name	Executions per second
filter+some+map	1262251.6 Ops/sec
filter+find+map	1219465.6 Ops/sec
forEach	2616.6 Ops/sec
forEach+push	872307.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance can be complex, but I'll break it down in simple terms.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to filter and map data:

1. `filter+some+map`
2. `filter+find+map`
3. `forEach+push`

Each approach uses an array `a` and another array `b` as input. The goal is to filter and map data from `a` using elements from `b`.

**Approach 1: `filter+some+map`**

This approach uses the `filter()` method to remove elements from `b` that don't match a condition (using `some()`), followed by the `map()` method to transform each remaining element.

```javascript
b.filter(bItem => a.some(aItem => aItem.id == bItem.id))
  .map(item => ({ ...item, ...a.find(aItem => aItem.id === item.id) }))
```

**Pros:**

* Efficient use of `some()` to filter out elements quickly.
* `map()` is used to transform each remaining element, which can be costly if the transformation is complex.

**Cons:**

* `some()` can lead to unnecessary iterations if not optimized correctly.
* The transformation in `map()` can be expensive if it involves complex logic or many calculations.

**Approach 2: `filter+find+map`**

This approach uses the `filter()` method to remove elements from `b`, followed by a nested `find()` and `map()` operation to transform each remaining element.

```javascript
b.filter(bItem => a.find(aItem => aItem.id == bItem.id))
  .map(item => ({ ...item, ...a.find(aItem => aItem.id === item.id) }))
```

**Pros:**

* Simplifies the filtering and transformation logic compared to Approach 1.
* `find()` can be faster than `some()` if the element is found quickly.

**Cons:**

* The nested `find()` and `map()` operations can lead to more iterations and slower performance for larger datasets.

**Approach 3: `forEach+push`**

This approach uses a traditional `for...of` loop with `forEach()` to iterate over `b`, pushing each element into an array (`forEachPushResult`) along with its matched element from `a`.

```javascript
b.forEach(bItem => {
  const x = a.find(aItem => aItem.id == bItem.id);
  if (x) {
    forEachPushResult.push({ ...bItem, ...x });
  }
})
```

**Pros:**

* Simple and straightforward approach with minimal overhead.
* Avoids the need for `filter()` or `map()`, which can be expensive operations.

**Cons:**

* Inefficient use of memory for large datasets, as elements are pushed into an array.
* May not perform well if the transformation is complex or involves many calculations.

In general, Approach 1 (`filter+some+map`) and Approach 2 (`filter+find+map`) are more efficient than Approach 3 (`forEach+push`), but the best approach depends on the specific requirements of your use case. If memory efficiency is a concern, Approach 3 might be suitable, while if performance is critical, Approaches 1 or 2 might be better choices.

**Device Platform and Browser**

The benchmark results show that the browser's Device Platform has a significant impact on performance. Mobile Safari 18 performs best in all cases, followed by unknown Device Platforms ( likely different browsers). The slower performance of the "forEach" approach suggests that this method is not optimized for mobile devices or has other factors affecting its performance.

Keep in mind that these results are specific to this benchmark and may vary depending on your use case, dataset size, and browser version.

Related benchmarks:

filter vs foreach loop test performance (version: 1)

Comparing performance of: filter+some+map vs filter+find+map vs forEach vs forEach+push

Created: 3 years ago by: Registered User

Jump to the latest result

filter+some+map

filter+find+map

forEach

forEach+push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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