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 j of arr) { sumFor += arr[j]; }

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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
forEach	311.4 Ops/sec
reduce	308.8 Ops/sec
map	299.3 Ops/sec
filter	300.6 Ops/sec
for	262.4 Ops/sec
for...of	334.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark compares the performance of six different approaches to iterate over an array and perform a calculation on each element: `forEach`, `reduce`, `map`, `filter`, `for`, and `for...of`. The test case creates an array of 12,345 elements and defines a function `someFn` that performs a complex calculation on each element.

**Test Cases**

Each test case uses a different iteration approach:

1. **`forEach`**: Uses the `Array.prototype.forEach` method to iterate over the array.
2. **`reduce`**: Uses the `Array.prototype.reduce` method to accumulate the results of the calculations.
3. **`map`**: Uses the `Array.prototype.map` method to create a new array with the results of the calculations.
4. **`filter`**: Uses the `Array.prototype.filter` method to create a new array with only the elements that pass the test.
5. **`for`**: Uses a traditional `for` loop to iterate over the array.
6. **`for...of`**: Uses the `for...of` loop to iterate over the array.

**Library Used**

None, as all tests use built-in JavaScript methods and operators.

**Special JS Features/Syntax**

No special features or syntax are used in this benchmark.

**Options Compared**

The benchmark compares the performance of each iteration approach:

*   **`forEach`**: Uses an explicit callback function to perform the calculation on each element.
*   **`reduce`**: Accumulates the results of the calculations using a cumulative function.
*   **`map`**: Creates a new array with the results of the calculations.
*   **`filter`**: Creates a new array with only the elements that pass the test.
*   **`for`**: Uses an explicit loop to iterate over the array.
*   **`for...of`**: Uses a modern loop syntax to iterate over the array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

*   **`forEach`**:
    *   Pros: Simple, easy to read, and maintainable. Does not require creating an intermediate array.
    *   Cons: May have performance overhead due to the callback function.
*   **`reduce`**:
    *   Pros: Efficient for cumulative calculations, reduces memory usage by avoiding the creation of an intermediate array.
    *   Cons: Can be complex and harder to read if not used correctly. Requires initializing the accumulator value.
*   **`map`**:
    *   Pros: Creates a new array with the results, which can be useful in some cases. Does not modify the original array.
    *   Cons: May have performance overhead due to creating an intermediate array, and may use more memory than other approaches.
*   **`filter`**:
    *   Pros: Creates a new array with only the elements that pass the test, which can be useful in some cases. Does not modify the original array.
    *   Cons: May have performance overhead due to creating an intermediate array, and may use more memory than other approaches.
*   **`for`**:
    *   Pros: Simple, easy to read, and maintainable. Does not require creating an intermediate array.
    *   Cons: Can be slower due to the traditional loop syntax.
*   **`for...of`**:
    *   Pros: Modern loop syntax that is easier to read and maintain than traditional `for` loops. Does not require creating an intermediate array.
    *   Cons: May have performance overhead due to the use of a specialized loop.

**Other Alternatives**

Some other alternatives could be considered:

*   **`every`**: A method that returns a boolean indicating whether all elements in the array pass the test.
*   **`some`**: A method that returns a boolean indicating whether any element in the array passes the test.
*   **`Array.prototype.slice()`**: A method that creates a shallow copy of an array.
*   **`Array.prototype.splice()`**: A method that modifies an array by removing or replacing elements.

However, these alternatives may not be suitable for this specific benchmark, as they do not provide the same level of control and flexibility as the original methods.

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

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 2 months ago):