Benchmark: forEach vs reduce vs map vs filter vs for (slightly optimized 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));
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 (let j = 0, len = arr.length; j < len; 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: 2 years ago)

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

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
forEach	252.2 Ops/sec
reduce	257.6 Ops/sec
map	250.4 Ops/sec
filter	248.9 Ops/sec
for	266.4 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of five different ways to process an array in JavaScript:

* **forEach:** Iterates over each element in the array and executes a provided function for each element. 
* **reduce:**  Combines all elements of an array into a single value by iterating through it, applying a function to accumulate a result.
* **map:** Creates a new array with the same length as the original array, mapping each element in the original array through a provided function.
* **filter:** Returns a new array containing only the elements that pass a test implemented by the provided function.
* **for loop:**  A traditional iterative approach using a counter and conditional statement to access and process each array element.

Each test case applies a simple mathematical operation (`someFn`) to each array element, summing up the results.

**Pros and Cons:**

* **forEach:** Simple for iterating without needing to accumulate a result.  Less efficient if you need to modify or combine elements.
* **reduce:** Powerful for accumulating a single value from an array. Can be more verbose than other methods.
* **map:** Excellent for transforming each element in an array into a new element.
* **filter:** Useful for selecting specific elements based on a condition.
* **for loop:** More control and potential for optimization, but can be more complex to write.

**Considerations:**

The best approach depends on the task. If you need a single value calculated from all elements, `reduce` is often a good choice. For transforming elements or selecting specific ones, `map` or `filter` are more appropriate. `forEach` is suitable for simple iteration without accumulating a result.

**Alternatives:**

JavaScript offers other array methods like `some`, `every`, and `find`, which can be used depending on the desired outcome. Libraries like Lodash provide additional utility functions that may be more efficient or concise than writing your own logic.

Let me know if you have any other questions!

Related benchmarks:

forEach vs reduce vs map vs filter vs for (slightly optimized for) (version: 0)

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 gemma2:9b, generated 2 months ago):