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

Script Preparation code:

//Create an array of 10000 random intergers between 1 and 10000
var arrRandom = [];
for(var intCtr=0; intCtr<10000; intCtr++) {
  arrRandom.push(Math.floor(Math.random() * Math.floor(10000)));
}

function reduceCallback(accum, curr) {
	return accum+curr;
}

function doReduce(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 = doReduce(arrRandom);
for loop
var loopResult=0; loopResult = doForLoop(arrRandom);
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
reduce
for loop
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; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
reduce	51208.5 Ops/sec
for loop	101910.2 Ops/sec
forEach	14940.4 Ops/sec
for of loop	15357.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares four different approaches for summing up an array of 10,000 random integers:

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

**Options Comparison**

Here's a brief overview of each option and their pros and cons:

### Array.prototype.reduce()

*   **Pros:** Efficient, elegant solution that leverages the array's built-in reduce method.
*   **Cons:** May not be familiar to developers who haven't used it before.

```javascript
function reduceCallback(accum, curr) {
    return accum + curr;
}

function doReduce(pArray) {
    return pArray.reduce(reduceCallback);
}
```

### Traditional for loop

*   **Pros:** Widely supported and well-known; easy to understand.
*   **Cons:** Can be slower due to the overhead of explicit looping.

```javascript
function doForLoop(pArray) {
    var accum = 0;
    var arrLength = pArray.length;

for (var intCtr = 0; intCtr < arrLength; intCtr++) {
        accum += pArray[intCtr];
    }

return accum;
}
```

### Array.forEach() with a callback function

*   **Pros:** Can be faster due to the optimized implementation of `forEach`.
*   **Cons:** May not provide direct access to array elements, which can lead to extra work.

```javascript
function doForEach(pArray) {
    var accum = 0;

pArray.forEach(function (item) {
        accum += item;
    });

return accum;
}
```

### for...of loop

*   **Pros:** Modern and efficient solution that leverages the `for...of` construct.
*   **Cons:** Not supported in older browsers or environments.

```javascript
function doForOfLoop(pArray) {
    var accum = 0;

for (var value of pArray) {
        accum += value;
    }

return accum;
}
```

**Library: None**

There are no libraries used in this benchmark.

**Special JS Feature/Syntax: For-of loop**

The `for...of` loop is a modern JavaScript feature that allows iterating over iterable objects (like arrays). It provides a more concise and expressive way to loop over arrays, making it easier to read and write code.

**Benchmark Results**

According to the provided benchmark results:

*   The traditional `for` loop is the fastest.
*   The `for...of` loop is close in performance but slightly slower than the traditional loop.
*   The `Array.forEach()` with a callback function is slower due to the overhead of calling the callback function for each element.

**Other Alternatives**

Some other alternatives that could be used instead of these four approaches are:

*   Using `MapReduce` or `Lodash` functions (e.g., `_.reduce()`) which provide similar functionality.
*   Utilizing libraries like `p-queue` or `async-matrix` for parallel execution of loops.
*   Implementing custom loop optimizations, such as using SIMD instructions.

Keep in mind that the choice of optimization technique depends on the specific requirements and constraints of your use case.

Related benchmarks:

Array.reduce vs for loop vs Array.forEach vs for of loop - 10000 (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>

Fastest: N/A

Slowest: N/A

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