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).forEach(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

Latest run results:

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

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

Browser/OS: Chrome 60 on Mac OS X 10.12.6

View result in a separate tab

Test name	Executions per second
filter + map	0.0 Ops/sec
forEach	468872.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches to filter and transform an array of objects: `forEach` vs `filter+map`. The input data is a JavaScript object (`contacts`) with 10 key-value pairs, where each value is another object with an `id` property. The test users want to select specific IDs from this data.

**Options being compared**

The two options being compared are:

1. **forEach**: This approach iterates over the array of objects using a callback function. For each iteration, it checks if the current object's ID is in the `selectedItems` array. If not, it adds the ID to the array.
2. **filter+map**: This approach uses two separate methods: `Object.values()` to get an array of objects, and then iterates over this array using another callback function. For each iteration, if the current object's ID is not in the `selectedItems` array, it adds the ID to the array.

**Pros and Cons**

* **forEach**: Pros:
	+ Easy to understand and implement.
	+ Does not require creating an intermediate array (unlike filter+map).
* Cons:
	+ May have slower performance due to the overhead of checking if an element is in the `selectedItems` array.
* **filter+map**: Pros:
	+ Can be faster for large datasets, as it avoids the overhead of repeated checks.
	+ Allows for a more functional programming style.
* Cons:
	+ Requires creating an intermediate array (`filteredItems`) to store the selected IDs.
	+ May be harder to understand and implement for some developers.

**Library usage**

There is no explicit library usage in this benchmark, but `Object.values()` is a modern JavaScript feature introduced in ECMAScript 2019 (ES2020). It returns an array of values from an object, without keys.

**Special JS features or syntax**

No special features or syntax are used in this benchmark. Both approaches rely on standard JavaScript language constructs.

**Other alternatives**

If you were to rewrite this benchmark with alternative approaches, you might consider:

* **Using a for...of loop**: This can be faster than using `forEach` and `indexOf`, as it avoids the overhead of function calls.
* **Using `Array.prototype.forEach` with a more efficient index method**: Some browsers have optimized `indexOf` methods that can reduce the number of iterations compared to using `includes()`.
* **Using a library like Lodash's `filterBy`**: This can provide a more concise and expressive way to implement the filter+map approach.

Keep in mind that the performance difference between these alternatives may be small, and other factors like input data size, browser, and hardware will influence the benchmark results.

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 2 months ago):