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;
	});
}

​x
 
//Create an array of 1000 random intergers between 1 and 10000var 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:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
reduce
for loop
forEach
for of loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce	150038.0 Ops/sec
for loop	0.0 Ops/sec
forEach	143406.7 Ops/sec
for of loop	457585.6 Ops/sec

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

Let's break down what's being tested in this benchmark.

Overview

The benchmark compares the performance of four different approaches to iterate over an array and calculate the sum:

Array.reduce()
Traditional for loop
Array.forEach() (with a callback function)
for...of loop

Options compared

Each option has its pros and cons:

Array.reduce(): This method is concise and expressive, as it combines the elements of an array into a single value using a callback function. However, it requires the accumulator to be initialized before calling reduce(), and its performance can be affected by the initial value.
Traditional for loop: A classic approach that's easy to understand and implement. It requires manual management of indices and accumulation, which can lead to bugs. Performance-wise, it's generally slower than other options due to the overhead of checking conditions and updating indices.
Array.forEach() with a callback function: This method is similar to reduce(), but instead of returning a single value, it executes a callback function for each element in the array. While it provides more flexibility, its performance can be slower than other options due to the overhead of executing the callback function.
for...of loop: A modern and concise approach that's gaining popularity. It eliminates the need for manual indices and accumulation, making it easier to write and maintain code. Performance-wise, it's generally faster than traditional for loops but can be slower than other options due to the overhead of iterating over the array.

Other considerations

Memory allocation: The benchmark doesn't account for memory allocation, which can impact performance. If the array is very large, allocating memory for each iteration can slow down the loop.
Garbage collection: The browser's garbage collector may interfere with the benchmark results by reusing or deallocating memory during the execution of the tests.

Libraries and syntax

None of the libraries are explicitly mentioned in the provided code. However, Array.reduce() uses a callback function, which is a built-in JavaScript feature. The for...of loop also relies on this feature to iterate over arrays.

Special JS features or syntax (not applicable)

Since there's no mention of special JS features or syntax in the provided code, I won't discuss them further.

Alternatives

Other alternatives for iterating over arrays and calculating sums include:

Using Map instead of Array, which can provide better performance for large datasets.
Utilizing parallel processing libraries like worker_threads or webworkers to take advantage of multiple CPU cores.
Employing specialized libraries like lodash or Underscore.js that provide optimized implementations for common array operations.

Keep in mind that the best approach will depend on the specific requirements and constraints of your project.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Overview**

The benchmark compares the performance of four different approaches to iterate over an array and calculate the sum:

1. `Array.reduce()`
2. Traditional `for` loop
3. `Array.forEach()` (with a callback function)
4. `for...of` loop

**Options compared**

Each option has its pros and cons:

1. **`Array.reduce()`**: This method is concise and expressive, as it combines the elements of an array into a single value using a callback function. However, it requires the accumulator to be initialized before calling `reduce()`, and its performance can be affected by the initial value.
2. **Traditional `for` loop**: A classic approach that's easy to understand and implement. It requires manual management of indices and accumulation, which can lead to bugs. Performance-wise, it's generally slower than other options due to the overhead of checking conditions and updating indices.
3. **`Array.forEach()` with a callback function**: This method is similar to `reduce()`, but instead of returning a single value, it executes a callback function for each element in the array. While it provides more flexibility, its performance can be slower than other options due to the overhead of executing the callback function.
4. **`for...of` loop**: A modern and concise approach that's gaining popularity. It eliminates the need for manual indices and accumulation, making it easier to write and maintain code. Performance-wise, it's generally faster than traditional `for` loops but can be slower than other options due to the overhead of iterating over the array.

**Other considerations**

* **Memory allocation**: The benchmark doesn't account for memory allocation, which can impact performance. If the array is very large, allocating memory for each iteration can slow down the loop.
* **Garbage collection**: The browser's garbage collector may interfere with the benchmark results by reusing or deallocating memory during the execution of the tests.

**Libraries and syntax**

None of the libraries are explicitly mentioned in the provided code. However, `Array.reduce()` uses a callback function, which is a built-in JavaScript feature. The `for...of` loop also relies on this feature to iterate over arrays.

**Special JS features or syntax (not applicable)**

Since there's no mention of special JS features or syntax in the provided code, I won't discuss them further.

**Alternatives**

Other alternatives for iterating over arrays and calculating sums include:

* Using `Map` instead of `Array`, which can provide better performance for large datasets.
* Utilizing parallel processing libraries like `worker_threads` or `webworkers` to take advantage of multiple CPU cores.
* Employing specialized libraries like `lodash` or `Underscore.js` that provide optimized implementations for common array operations.

Keep in mind that the best approach will depend on the specific requirements and constraints of your project.

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: reduce vs for loop vs forEach vs for of loop

Created: 7 years ago by: Guest

Jump to the latest result

reduce

for loop

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