Benchmark: foreach vs filter+map

Script Preparation code:

var contacts = {
  'a1@a.com': {id: 1},
  'a2@a.com': {id: 2},
  'a3@a.com': {id: 3},
  'a4@a.com': {id: 4},
  'a5@a.com': {id: 5},
  'a6@a.com': {id: 6},
  'a7@a.com': {id: 7},
  'a8@a.com': {id: 8},
  'a9@a.com': {id: 9},
  'a10@a.com': {id: 10},
}

var selectedItems = [1,3,7];

Tests:

filter + map
selectedItems = Object.values(contacts).filter(contact => selectedItems.indexOf(contact.id) === -1).map(contact => contact.id)
forEach
Object.values(contacts).forEach((contact) => { if (selectedItems.indexOf(contact.id) === -1) { selectedItems.push(contact.id); } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter + map
forEach

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark compares two approaches to filter and extract IDs from an object: `forEach` and `filter + map`. We'll break down each approach, its pros and cons, and other considerations.

**Approach 1: Using `forEach`**

```javascript
Object.values(contacts).forEach((contact) => {
  if (selectedItems.indexOf(contact.id) === -1) {
    selectedItems.push(contact.id);
  }
});
```

Pros:

* This approach is more straightforward and easier to read, as it uses a familiar loop construct.
* It doesn't require the use of `filter` or `map`, which can be beneficial for older browsers that don't support these methods.

Cons:

* The `forEach` loop iterates over the object's values, but also iterates over the array elements in `selectedItems`. This can lead to performance issues if the arrays are large.
* The inner `if` statement checks for the presence of `contact.id` in `selectedItems`, which can be slow.

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

```javascript
Object.values(contacts).filter(contact => selectedItems.indexOf(contact.id) === -1).map(contact => contact.id)
```

Pros:

* This approach is generally faster, as it uses efficient built-in methods that are optimized for performance.
* It avoids the overhead of an inner loop and the potential issues with array iteration.

Cons:

* The `filter` method creates a new array with only the filtered elements, which can lead to additional memory allocation and deallocation.
* Some older browsers might not support `filter` or `map`, although this is unlikely given the widespread adoption of modern browsers.

**Other considerations:**

* In both approaches, we're using `Object.values()` to get an array of object values. This is a relatively new feature (introduced in ECMAScript 2015) that provides a convenient way to iterate over an object's values.
* The `selectedItems` array is used as a set to keep track of the IDs that need to be extracted from the object. Using a set (or a similar data structure like an array with unique elements) can improve performance by avoiding duplicate checks.

**Library or syntax-specific considerations:**

In this benchmark, there are no libraries or special JavaScript features being tested. However, if you were testing a different approach that relied on a library or specific feature, you would need to consider the pros and cons of using that library or feature in your code.

**Alternatives:**

If you're looking for alternative approaches to filter and extract IDs from an object, here are some options:

* Using `for...in` loop instead of `forEach`: This approach can be faster but is less readable.
* Using a nested `reduce()` method: This approach is more concise but can be slower due to the overhead of the reduction operation.

Keep in mind that these alternatives might not provide significant performance improvements and may make your code harder to understand. The `forEach` and `filter + map` approaches are generally good choices for most use cases, but it's essential to consider the specific requirements of your project when deciding on an implementation.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.81 Safari/537.36

Browser/OS: Chrome 72 on Linux

View result in a separate tab

Test name	Executions per second
filter + map	604010.9 Ops/sec
forEach	719407.8 Ops/sec

Related benchmarks:

foreach vs filter+map (version: 0)

Comparing performance of: filter + map vs forEach

Created: 7 years ago by: Guest

Jump to the latest result

filter + map

forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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