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

for loop

102K/s

reduce

51K/s

for of loop

15K/s

forEach

15K/s

View exact numbers

Test name	Executions per second
✓ for loop	101,910 Ops/sec
reduce	51,209 Ops/sec
for of loop	15,358 Ops/sec
forEach	14,940 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.

Array.reduce vs for loop vs Array.forEach vs for of loop - 10000 (version: 0) Benchmark.js

A test summing 1000 random numbers, 1 - 10000

Comparing performance of: `reduce vs for loop vs forEach vs for of loop`

Created: 8 years ago by: Guest

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

Array.reduce vs for loop vs Array.forEach vs for of loop - 10000 (version: 0) Benchmark.js

A test summing 1000 random numbers, 1 - 10000

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

Created: 8 years ago by: Guest

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

Related benchmarks

Comparing performance of: `reduce vs for loop vs forEach vs for of loop`