Benchmark: forEach vs reduce vs for vs map and filter

Script Preparation code:

var arr = [];
for (var i = 0; i < 12345; i++) {
  arr[i] = i;
}

function someFn(i) {
  return (i % 5);
}

var sumForEach = 0,
  sumReduce = 0,
  sumMap = 0,
  sumFilter = 0,
  sumFor = 0;

Tests:

forEach
let newArr = [] arr.forEach(item => { if(item) newArr.push(item) });
reduce
let newArr = arr.reduce((lastValue, item) => { if(item) lastValue.push(item); return lastValue }, []);
for
let newArr = [] for (let j of arr) { if(j) newArr.push(j); }
map and filter
let newArr = arr.map(a => a ? a : false).filter(a => a)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
reduce
for
map and filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 78 on Windows

View result in a separate tab

Test name	Executions per second
forEach	9681.0 Ops/sec
reduce	8740.5 Ops/sec
for	15971.7 Ops/sec
map and filter	2935.6 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 world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares the performance of four different approaches to loop through an array, map new values, and filter the output:

1. `forEach`
2. `reduce`
3. `for` loops
4. `map` and `filter` methods

Each test case has a unique definition in the "Benchmark Definition" section.

**Test Case Analysis**

### 1. `forEach`

The `forEach` method is called on an array, iterating through each element and pushing it to a new array if it's not null or undefined (`if(item) newArr.push(item)`). This approach iterates through the array once.

Pros:

* Easy to read and maintain
* Less overhead compared to other methods

Cons:

* May have more memory allocation due to frequent push operations
* Can be slower than other methods with less overhead

### 2. `reduce`

The `reduce` method is used to reduce an array to a single value, which in this case is the filtered and mapped array (`let newArr = arr.reduce((lastValue, item) => {...}, [])`). The callback function iterates through the array, applying the filtering condition (`if(item)`).

Pros:

* Can be more efficient than `forEach` due to fewer push operations
* Encapsulates iteration and filtering in a single method

Cons:

* May have higher overhead due to the initial call with an empty array
* Less readable for those unfamiliar with reduce()

### 3. `for`

The `for` loop iterates through the array using a traditional loop (`for (let j of arr)`), checking each element and pushing it to the new array if it's not null or undefined (`if(j) newArr.push(j)`).

Pros:

* Most familiar syntax for developers
* Less memory allocation compared to `forEach`

Cons:

* Can be slower due to the overhead of traditional loops

### 4. `map` and `filter`

The `map` method creates a new array by applying the callback function (`let newArr = arr.map(a => a ? a : false)`), and then the `filter` method is called on this result to remove null or undefined values.

Pros:

* Can be more efficient than other methods with less memory allocation
* Encapsulates iteration and filtering in two separate but related methods

Cons:

* May have higher overhead due to the creation of an intermediate array
* Less readable for those unfamiliar with these methods

**Library Usage**

The `reduce` method uses the Array.prototype.reduce() method, which is a built-in JavaScript method. The purpose of this method is to reduce an array to a single value.

**JavaScript Features and Syntax**

There are no specific features or syntax used in this benchmark that would require special attention. However, it's worth noting that `let` declarations, arrow functions (`=>`), and template literals (`\r\n`) are modern JavaScript features commonly used in recent versions of the language.

**Other Alternatives**

Some alternative approaches to looping through an array, mapping new values, and filtering the output could include:

* Using a traditional `for` loop with indexing
* Utilizing a library like Lodash or Ramda for functional programming
* Employing a streaming algorithm that processes elements one by one

However, these alternatives might introduce more complexity or overhead compared to the methods tested in this benchmark.

**Benchmark Preparation Code**

The provided "Script Preparation Code" initializes an array `arr` with 12345 elements and defines a simple function `someFn(i)` for demonstration purposes. The code then sets up variables to measure the performance of each test case.

**HTML Preparation Code**

There is no HTML preparation code provided, indicating that this benchmark might be run in a Node.js environment or another context where HTML is not required.

Related benchmarks:

forEach vs reduce vs for vs map and filter (version: 0)

looping multiple times or just once over an array to map new values and filter the ouput

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

Created: 4 years ago by: Guest

Jump to the latest result

forEach

reduce

for

map and filter

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