Benchmark: array.forEach() vs .reduce test

Script Preparation code:

var array = [];
for (var i = 0; i < 10000; i++) {
  array[i] = i;
}

var firstTestResults = [];
var secondTestResults = [];

Tests:

array.forEach()
array.forEach((value) => { value = value + 10; if (value % 2 === 0) { firstTestResults.push(value); } });
array.reduce()
secondTestResults = array.reduce((acc, value) => { value = value + 10; if (value % 2 === 0) { acc.push(value); } return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.forEach()
array.reduce()

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; rv:84.0) Gecko/20100101 Firefox/84.0

Browser/OS: Firefox 84 on Windows

View result in a separate tab

Test name	Executions per second
array.forEach()	1888.1 Ops/sec
array.reduce()	3115.4 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 provided benchmark and explain what's being tested, compared, and other considerations.

**Benchmark Overview**

The benchmark compares two approaches to processing an array of numbers: using `Array.prototype.forEach()` and using `Array.prototype.reduce()`. Both tests aim to increment each number in the array by 10 and push even numbers to separate arrays (`firstTestResults` for `forEach()` and `secondTestResults` for `reduce()`).

**Comparison Options**

There are two comparison options:

1. **Array.forEach()**: This approach uses a traditional loop to iterate over the array, modifying each element in place.
2. **Array.prototype.reduce()**: This approach uses a single function call to process the entire array, accumulating results in an intermediate array.

**Pros and Cons of Each Approach**

* **Array.forEach()**:
	+ Pros: Easy to understand, intuitive syntax, flexible (can be used for various tasks).
	+ Cons: Can lead to slower performance due to multiple function calls and unnecessary memory allocations.
	+ Side effect: Modifies the original array, which may not be desirable in all cases.
* **Array.prototype.reduce()**:
	+ Pros: Efficient, concise syntax, avoids modifying the original array (if desired).
	+ Cons: Steeper learning curve, less intuitive for beginners.

**Library and Special JS Features**

Neither of these approaches relies on any external libraries. However, `forEach()` uses a standard JavaScript method to iterate over the array, while `reduce()` utilizes a built-in method for accumulating results.

**Other Considerations**

* **Memory allocation**: Both approaches allocate memory for temporary variables (e.g., `value` in `forEach()` and `acc` in `reduce()`), which can impact performance.
* **Overhead of function calls**: Both methods involve additional overhead due to the number of function calls required to process the array.

**Alternatives**

If you need to compare other approaches, here are some alternatives:

1. **For...of loop**: Similar to `forEach()`, but with a more modern syntax.
2. **While loop**: A traditional loop that can be used for various tasks, including array processing.
3. **Set or Map data structures**: Alternative data structures that can improve performance and memory usage in certain scenarios.

Keep in mind that the choice of approach depends on the specific requirements and constraints of your project.

Related benchmarks:

array.forEach() vs .reduce test (version: 0)

Comparing performance of: array.forEach() vs array.reduce()

Created: 3 years ago by: Guest

Jump to the latest result

array.forEach()

array.reduce()

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):