Benchmark: forEach vs for-of vs reduce vs map vs filter vs for

Script Preparation code:

var arr = [];
for (var i = 0; i < 12345; i++) {
  arr[i] = i;
}

function someFn(i) {
  return (i * 3 * 8 / 1200 * 0.002 / 40 * 0.2);
}

var sumForEach = 0,
  sumReduce = 0,
  sumMap = 0,
  sumFilter = 0,
  sumFor = 0;

Tests:

forEach
arr.forEach(item => sumForEach += someFn(item));
for of
for (const item of arr) { sumFor += item; }
map
arr.map(item => (sumMap += someFn(item)));
filter
arr.filter(item => (sumFilter += someFn(item)));
for
for (var j = 0; j < arr.length; j++) { sumFor += arr[j]; }
reduce
sumReduce = arr.reduce((lastValue, item) => { return lastValue + someFn(item); }, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for of
map
filter
for
reduce

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/127.0.0.0 Safari/537.36 Edg/127.0.0.0

Browser/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
forEach	284.1 Ops/sec
for of	465.4 Ops/sec
map	286.8 Ops/sec
filter	286.7 Ops/sec
for	260.1 Ops/sec
reduce	723.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 on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of six different approaches to iterate over an array:

1. `forEach`
2. `for-of` (also known as "for...of")
3. `reduce`
4. `map`
5. `filter`
6. A traditional `for` loop

Each approach is executed on a large array (`arr`) with 12,345 elements.

**Approach Comparison**

Here's a brief summary of each approach:

1. **`forEach`**: Iterates over the array using the `forEach` method, which calls a provided callback function for each element.
	* Pros: Simple and intuitive, no need to worry about indices or bounds checking.
	* Cons: Can be slower due to function call overhead and potential cache misses.
2. **`for-of`**: Iterates over the array using a `for...of` loop, which is similar to a traditional `for` loop but uses the iterator protocol.
	* Pros: Fast and efficient, as it avoids function call overhead and cache misses.
	* Cons: Requires support for the iterator protocol, which might not be available in older browsers or environments.
3. **`reduce`**: Reduces the array by applying a callback function to each element, accumulating the results.
	* Pros: Efficient and concise, as it uses accumulator variables to avoid unnecessary iterations.
	* Cons: Can be slower due to the overhead of creating and updating accumulator variables.
4. **`map`**: Creates a new array by applying a callback function to each element in the original array.
	* Pros: Fast and efficient, as it avoids modifying the original array.
	* Cons: Requires creating a new array, which can lead to memory allocation overhead.
5. **Traditional `for` loop**: Iterates over the array using a traditional `for` loop with an index variable.
	* Pros: Simple and intuitive, no need to worry about indices or bounds checking.
	* Cons: Can be slower due to function call overhead and potential cache misses.

**Library and Special Features**

The benchmark uses the built-in JavaScript Array prototype methods:

* `forEach`
* `map`
* `filter`
* `reduce`

There are no special features or syntax used in this benchmark. It's a straightforward test of different iteration approaches.

**Other Alternatives**

If you're interested in exploring alternative iteration approaches, here are some examples:

* **`every`, `some`, and `someWithIndex`**: These methods iterate over the array and return a boolean value indicating whether all or any elements satisfy the callback function. They're often faster than `forEach` but might not be suitable for all use cases.
* **`iterable.forEach()`, `iterable.map()`, and `iterable.filter()`**: These methods are part of the ECMAScript 2015 (ES6) standard and provide similar functionality to their Array counterparts. However, they're only available in modern browsers and Node.js environments that support ES6.
* **Custom iteration loops**: You can write your own custom iteration loops using `for` loops or other constructs like `while` or recursive functions. These approaches often offer the most control but require more manual effort and may be slower due to overhead.

Keep in mind that the choice of iteration approach depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

forEach vs for-of vs reduce vs map vs filter vs for (version: 0)

Comparing performance of: forEach vs for of vs map vs filter vs for vs reduce

Created: one year ago by: Guest

Jump to the latest result

forEach

for of

map

filter

for

reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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