Benchmark: forEach vs reduce vs map vs filter vs for (w/o reading .length)

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
reduce
map
filter
for

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

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
forEach	278.6 Ops/sec
reduce	280.5 Ops/sec
map	275.5 Ops/sec
filter	275.3 Ops/sec
for	300.6 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 benchmark and analyze what's being tested.

The provided JSON represents a JavaScript microbenchmark that compares the performance of different methods for iterating over an array: `forEach`, `reduce`, `map`, `filter`, and a manual loop using `for` without reading the length of the array at each iteration.

Here's a brief explanation of each test case:

1.  **`forEach`**: This method iterates over the elements of an array, calling the provided callback function for each element.
2.  **`reduce`**: This method applies a binary accumulator function to each element in the array, reducing it to a single output value.
3.  **`map`**: This method creates a new array with the results of applying the provided callback function to each element in the original array.
4.  **`filter`**: This method creates a new array with all elements that pass the test implemented by the provided callback function.
5.  **Manual loop using `for` without reading `length`**: In this implementation, we manually iterate over the array using a for loop, but instead of checking the length of the array at each iteration, we hardcode it to be known before the loop starts.

Now, let's discuss the pros and cons of each approach:

*   **`forEach`**:

*   Pros:
        *   Easy to read and write
        *   No need to keep track of an index or accumulator value
    *   Cons:

*   May have slower performance due to function call overhead

*   **`reduce`**:

*   Pros:

*   Can be used for aggregating values or transforming data
        *   May be faster than `forEach` due to potential optimization
    *   Cons:
        *   More complex and error-prone than `forEach`
        *   Requires an initial value to start the aggregation

*   **`map`**:

*   Pros:

*   Creates a new array with transformed values
        *   Easy to read and write
    *   Cons:

*   May have slower performance due to function call overhead
        *   Requires more memory for the resulting array

*   **Manual loop using `for` without reading `length`**:

*   Pros:

*   Can be faster than other methods due to reduced function call overhead
        *   Allows fine-grained control over iteration and optimization
    *   Cons:
        *   More complex and error-prone than other methods
        *   May not be readable or maintainable for large arrays

Regarding the use of special JavaScript features:

The test case uses a function `someFn` that performs some mathematical operations on its input. This is a typical example of a functional programming approach, where functions are used to abstract away low-level details and focus on the logic of the algorithm.

In terms of alternatives, other methods for iterating over arrays in JavaScript include:

*   `every`, `some`, `includes`, or `indexOf` for testing array membership
*   `concat`, `slice`, or `splice` for array manipulation

However, these methods are not typically used for simple iteration like the ones tested here.

In summary, the benchmark compares different approaches to iterating over arrays in JavaScript, highlighting their trade-offs in terms of performance, readability, and complexity.

Related benchmarks:

forEach vs reduce vs map vs filter vs for (w/o reading .length) (version: 0)

Use for without read xx.length at each iteration

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

Created: 3 years ago by: Guest

Jump to the latest result

forEach

reduce

map

filter

for

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