Benchmark: Array.reduce vs for loop vs Array.forEach vs for of loop

Script Preparation code:

//Create an array of 1000 random intergers between 1 and 10000
var arrRandom = [];
for(var intCtr=0; intCtr<1000; intCtr++) {
  arrRandom.push(Math.floor(Math.random() * Math.floor(10000)));
}

function reduceCallback(accum, curr) {
	return accum+curr;
}

function doRedeuce(pArray) {
	return pArray.reduce(reduceCallback);
}
function doForLoop(pArray) {
	var accum = 0;
	var arrLength = pArray.length;
	for(var intCtr=0; intCtr<arrLength; intCtr++) {
		accum += pArray[intCtr];
	}
	return accum;
}
function doForOfLoop(pArray) {
	var accum = 0;
	for(var value of pArray) {
		accum += value;
	}
	return accum;
}
function doForEach(pArray) {
	var accum = 0;
	pArray.forEach(function(item) {
		accum += item;
	});
}

Tests:

Array.reduce
var redeuceResult=0; redeuceResult = doRedeuce(arrRandom);
for loop
var loopResult=0; loopResult = doForLoop(arrRandom);
Array.forEach
var forEachResult=0 forEachResult = doForEach(arrRandom)
for of loop
var forOfResult=0 forOfResult = doForOfLoop(arrRandom)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.reduce
for loop
Array.forEach
for of loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
Array.reduce	96538.7 Ops/sec
for loop	757090.4 Ops/sec
Array.forEach	644713.8 Ops/sec
for of loop	588140.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Overview**

The test compares the performance of four different approaches to sum an array of 1000 random integers:

1. `Array.prototype.reduce()`
2. A traditional `for` loop
3. `Array.prototype.forEach()` with a callback function
4. An `Iterator Protocol` (ECMAScript 2020+) implemented `for...of` loop

Each test case has a separate benchmark definition, which is executed to measure the execution time.

**Options Compared**

1. **Array.prototype.reduce()**: This method accumulates values in an array and returns the accumulated value. In this case, it's used to sum all elements of the input array.
2. **Traditional `for` loop**: A classic way to iterate over an array using a loop variable.
3. **Array.prototype.forEach()` with a callback function**: This method iterates over an array and executes a provided callback function for each element in the array.
4. **Iterator Protocol (ECMAScript 2020+) implemented `for...of` loop**: A modern way to iterate over arrays, introduced in ECMAScript 2020+. It's more concise and efficient than traditional loops.

**Pros and Cons**

1. **Array.prototype.reduce()**:
	* Pros: Concise, easy to read, and expressive.
	* Cons: May be slower due to the overhead of creating an accumulator object.
2. **Traditional `for` loop**:
	* Pros: Fast, reliable, and easy to optimize.
	* Cons: Can be verbose and less readable than other options.
3. **Array.prototype.forEach()` with a callback function**:
	* Pros: Easy to read, concise, and flexible.
	* Cons: May have performance overhead due to the creation of an array of accumulated values.
4. **Iterator Protocol (ECMAScript 2020+) implemented `for...of` loop**:
	* Pros: Modern, efficient, and concise.
	* Cons: Requires ECMAScript 2020+ support, which may not be available in all browsers.

**Library/Features Used**

1. The `doRedeuce()`, `doForLoop()`, and `doForEach()` functions use the `Array.prototype.reduce()`, traditional `for` loop, and `Array.prototype.forEach()` methods, respectively.
2. The `doForOfLoop()` function uses the new `Iterator Protocol` (ECMAScript 2020+) implemented `for...of` loop.

**Special JavaScript Features/Syntax**

This benchmark does not use any special JavaScript features or syntax other than the ECMAScript 2020+ Iterator Protocol, which is widely supported in modern browsers and Node.js.

**Other Alternatives**

For this specific test, the alternatives are:

1. Using a `while` loop instead of a traditional `for` loop.
2. Using the `map()` method to sum all elements in the array (although this would return a new array with summed values).
3. Using a library like Lodash or Ramda for functional programming approaches.

These alternatives might be suitable for different use cases, but for this specific test, the four options mentioned are the most relevant and comparable approaches.

Related benchmarks:

Array.reduce vs for loop vs Array.forEach vs for of loop (version: 0)

A test summing 1000 random numbers, 1 - 10000

Comparing performance of: Array.reduce vs for loop vs Array.forEach vs for of loop

Created: 6 years ago by: Guest

Jump to the latest result

Array.reduce

for loop

Array.forEach

for of loop

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