Benchmark: forEach vs reduce vs map vs filter vs for 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;

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]; }
for..of
for (const item of arr) { sumFor += item; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
reduce
map
filter
for
for..of

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll dive into the explanation.

**Benchmark Definition**

The benchmark measures the performance of different JavaScript iteration methods: `forEach`, `reduce`, `map`, `filter`, and two types of `for` loops (`for` and `for...of`). Each test case is executed on a large array (12345 elements) to analyze their relative performance.

**Options Compared**

Here's an overview of the options compared:

*   **forEach**: This method iterates over an array using a callback function.
*   **reduce**: This method applies a reducer function to each element in an array, accumulating a value.
*   **map**: This method creates a new array with the results of applying a provided function on every element in this array.
*   **filter**: This method constructs a new array with all elements that pass the test implemented by the provided function.
*   **for** (traditional): This method uses a traditional `for` loop to iterate over an array.
*   **for...of**: This method uses a `for...of` loop to iterate over an array.

Each option has its pros and cons:

*   **forEach**, **map**, and **filter**:
    *   Pros: More concise, easier to read for simple iterations. These methods are generally faster due to their optimized implementation.
    *   Cons: May not be suitable for complex or multi-step operations.
*   **reduce**:
    *   Pros: Suitable for accumulating values by iterating over an array and applying a reducer function.
    *   Cons: Can be slower than the other methods for simple iterations, as it may require more memory accesses.
*   **for (traditional)**:
    *   Pros: Suitable for complex or multi-step operations. Provides control over loop iterations.
    *   Cons: Less concise and harder to read compared to modern iteration methods.

**Library/Function Usage**

In the provided benchmark definition, two libraries/functions are used:

1.  `someFn`: A custom function that takes an integer as input and performs arithmetic operations on it (as shown in the script preparation code). Its purpose is to simulate a computational task during the iterations.
2.  No external library or function is explicitly mentioned for the iteration methods themselves (`forEach`, `reduce`, `map`, `filter`).

**Special JS Features**

There are no special JavaScript features or syntax used beyond what's necessary for the benchmark itself.

**Alternative Approaches**

Here are alternative approaches that could be considered:

*   **Loop Unrolling**: For performance-critical loops, loop unrolling involves incrementing a counter more frequently than the loop needs to execute. This can help reduce overhead.
*   **Parallelization**: For large arrays or complex operations, parallelizing the iterations using Web Workers (for CPU-bound tasks) or async/await with `Promise.all()` (for I/O-bound tasks) could lead to significant performance gains.
*   **JS Engine-specific Optimizations**: Modern JavaScript engines offer various optimizations like Just-In-Time (JIT) compilation, Ahead-Of-Time (AOT) compilation, and more. Depending on the specific engine and scenario, these might provide better performance than the tested approaches.

Keep in mind that different scenarios may require varying trade-offs between readability, maintainability, and performance.

Hope this explanation provides a solid foundation for understanding this benchmark!

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/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach	360.9 Ops/sec
reduce	356.5 Ops/sec
map	350.6 Ops/sec
filter	353.5 Ops/sec
for	307.2 Ops/sec
for..of	543.8 Ops/sec

Related benchmarks:

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

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

Created: 3 years ago by: Registered User

Jump to the latest result

forEach

reduce

map

filter

for

for..of

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