Benchmark: forEach vs map + filter

Script Preparation code:

var arr = [];
for (var i = 0; i < 12345; i++) {
  arr[i] = i;
}

function someFn(i) {
  return (i * 3 * 8 / 1200 * 0.002 / 40 * 0.2);
}

var sumForEach = 0,
  sumReduce = 0,
  sumMap = 0,
  sumFilter = 0,
  sumFor = 0;

Tests:

forEach
const myItems = [] arr.forEach(item => { if (item > 2) { myItems.push(item) } });
map + filter
const myItems = arr.map(item => (item > 2 ? item : undefined)).filter(Boolean)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
map + filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

forEach

23K/s

map + filter

8K/s

View exact numbers

Test name	Executions per second
✓ forEach	22,758 Ops/sec
map + filter	7,523 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark compares the performance of two approaches:

1. **forEach**: A traditional loop-based approach using `Array.forEach()` method to iterate over an array and filter out elements that don't meet a condition.
2. **map + filter**: A more modern, concise approach using `Array.prototype.map()` and `Array.prototype.filter()` methods in combination to achieve the same result.

**Options Compared**

The two approaches are compared in terms of their execution speed, measured in executions per second (EPS).

**Pros and Cons of Each Approach:**

1. **forEach**:
	* Pros:
		+ Simple and easy to understand for beginners.
		+ Works well with smaller arrays or dynamic array lengths.
	* Cons:
		+ Can be less efficient than the modern approach due to its iterative nature.
2. **map + filter**:
	* Pros:
		+ More concise and expressive, making it easier to read and maintain.
		+ Often faster and more memory-efficient than traditional loop-based approaches.
	* Cons:
		+ May not be as intuitive for beginners.

**Library and Purpose**

In the provided test case, no external library is used. However, `Array.prototype.map()` and `Array.prototype.filter()` are built-in methods in JavaScript that modify an array by creating a new array with the results of applying a specified function to each element.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. The code is standard JavaScript, using modern best practices for array manipulation.

**Other Alternatives**

If `forEach` or `map + filter` aren't suitable options, other alternatives could be:

1. **for...of loop**: A more concise and efficient way to iterate over arrays.
2. **reduce()` method: An alternative to summing up elements in an array using a traditional loop-based approach.

However, these alternatives are not being tested in this specific benchmark.

**Benchmark Preparation Code**

The script preparation code creates an empty array `arr` with 12345 elements and defines a function `someFn(i)` that performs some calculations on each element. The variable declarations for the sum variables (`sumForEach`, `sumReduce`, etc.) are also defined, but their initial values are not specified.

**Individual Test Cases**

The test cases compare the performance of the two approaches:

1. **forEach**: Uses the traditional loop-based approach to filter out elements that don't meet a condition.
2. **map + filter**: Uses the modern, concise approach with `Array.prototype.map()` and `Array.prototype.filter()` methods in combination.

These test cases are executed repeatedly to measure their execution speed, which is reported as executions per second (EPS) in the benchmark results.

forEach vs map + filter (version: 0) Benchmark.js

Comparing performance of: `forEach vs map + filter`

Created: 2 years ago by: Guest

Go to the latest result

forEach

map + filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

forEach vs map + filter (version: 0) Benchmark.js

Comparing performance of: forEach vs map + filter

Created: 2 years ago by: Guest

Go to the latest result

forEach

map + filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `forEach vs map + filter`