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

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,
  sumForOf =0;

Tests:

forEach
arr.forEach(item => sumForEach += someFn(item));
reduce
sumReduce = arr.reduce((lastValue, item) => { return sumReduce += someFn(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]; }
forof
for (let a of arr) { sumForOf += a; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
reduce
map
filter
for
forof

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36

Browser/OS: Chrome 83 on Mac OS X 10.15.5

View result in a separate tab

Test name	Executions per second
forEach	234.4 Ops/sec
reduce	222.7 Ops/sec
map	212.5 Ops/sec
filter	225.5 Ops/sec
for	203.3 Ops/sec
forof	342.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the Benchmark Definition and analyze what's being tested.

The benchmark measures the performance of various JavaScript iteration methods: `forEach`, `reduce`, `map`, `filter`, and `for` (including `for-of`). The test case creates an array of 12,345 elements, populated with integers from 0 to 11,444. Each iteration method is used to calculate a sum by applying the same function (`someFn`) to each element in the array.

Here's a brief explanation of each approach:

1. `forEach`: Iterates over the array using the `forEach` method, calling the callback function for each element.
2. `reduce`: Accumulates the sum by reducing the array to a single value using the `reduce` method, with an initial value of 0.
3. `map`: Creates a new array by mapping the original array's elements to a new value using the `map` method, accumulating the sums in the process.
4. `filter`: Filters the array to only include elements that meet a condition (in this case, always true) and accumulates the sums in the filtered array.
5. `for`: Iterates over the array manually using a traditional `for` loop, adding each element to the sum.

**Options compared:**

The benchmark is comparing the performance of these five iteration methods on an array of 12,345 elements. The comparison aims to identify which method is most efficient in terms of execution time and memory usage.

**Pros and Cons:**

* **forEach**: Pros - easy to read and write, straightforward syntax. Cons - can be less efficient due to the overhead of callback functions.
* **reduce**: Pros - concise syntax, accumulating sums can be easier than iterating over the array. Cons - requires initial value and callback function, can be error-prone.
* **map**: Pros - creates a new array with transformed values, easy to chain methods. Cons - creates an additional array, which can be memory-intensive.
* **filter**: Pros - filters out unwanted elements, easy to write conditional logic. Cons - also creates an additional array and can be slower due to the filtering process.
* **for**: Pros - manual control over iteration, no overhead from method calls. Cons - verbose syntax, prone to errors.

**Library usage:**

There is no explicit library used in the benchmark code. However, the `map` method uses the `Array.prototype.map()` method, which is a built-in JavaScript method.

**Special JS feature or syntax:**

* The `for-of` loop (used in the "forof" test case) was introduced in ECMAScript 2015 (ES6). It provides a more concise and readable way to iterate over arrays without manual indexing.
* The use of arrow functions (`=>`) is also a modern JavaScript feature, introduced in ECMAScript 2015.

**Other alternatives:**

To further improve performance or provide alternative iteration methods, other options could be explored, such as:

* Using `Array.prototype.forEach()` with a custom callback function
* Implementing a custom iterator using the `Symbol.iterator` method and `next()` function
* Utilizing Web Workers or parallel processing for multi-threaded execution

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

forEach

reduce

map

filter

for

forof

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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