Benchmark: forEach vs reduce vs map vs filter vs for (to build an array)

Script Preparation code:

var arr = [];
for (var i = 0; i < 250000; 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
const newArray = []; arr.forEach(item => { if(item % 2==0) newArray.push(item); });
reduce
sumReduce = arr.reduce((newArray, item) => { if(item % 2==0) newArray.push(item); return newArray; }, []);
filter
arr.filter(item => (item % 2==0));
for
const newArray = []; for (var j = 0; j < arr.length; j++) { if(arr[j] % 2==0) newArray.push(arr[j]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
reduce
filter
for

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is testing four different approaches to filter and manipulate an array of numbers in JavaScript:

1. `for` loop (manual iteration)
2. `Array.prototype.forEach()` method
3. `Array.prototype.reduce()` method
4. `Array.prototype.filter()` method

The test case creates a large array of 250,000 elements, each assigned a value using the formula `someFn(i) = (i * 3 * 8 / 1200 * 0.002 / 40 * 0.2)`. The goal is to filter out even numbers from this array.

**Options Comparison**

Here's a brief overview of each approach, their pros and cons, and other considerations:

1. **`for` loop**:
	* Pros: Direct control over iteration, no dependencies on browser or JavaScript engine.
	* Cons: Manual iteration can be error-prone, time-consuming, and less efficient than built-in methods.
2. `Array.prototype.forEach()` method:
	* Pros: Easy to use, efficient, and widely supported across browsers and environments.
	* Cons: May not provide direct control over iteration, as the callback function is executed for each element.
3. `Array.prototype.reduce()` method:
	* Pros: Efficient for accumulating values, but can be slower than `forEach` or `filter` for simple filtering tasks.
	* Cons: Requires an initial value and may be more complex to use for simple filtering tasks.
4. `Array.prototype.filter()` method:
	* Pros: Fast, efficient, and easy to use for simple filtering tasks.
	* Cons: May not work as expected with certain edge cases or complex filtering conditions.

**Library Use**

The test case uses the following libraries:

1. **JavaScript Engine**: The benchmark is executed on a JavaScript engine that implements the ECMAScript standard (e.g., SpiderMonkey in Firefox).
2. **Browser**: The test is run on a desktop version of Firefox 108.
3. **No external libraries**: There are no external libraries used in this benchmark, except for `someFn`, which is a custom function.

**Special JavaScript Feature or Syntax**

There is no specific special feature or syntax used in this benchmark.

**Other Considerations**

When choosing an approach to filter and manipulate arrays in JavaScript:

* For simple filtering tasks, `Array.prototype.filter()` is often the most efficient and straightforward choice.
* When direct control over iteration is necessary, a `for` loop might be preferred.
* If you need to accumulate values while filtering, consider using `Array.prototype.reduce()`.
* Always ensure that your code is concise, readable, and maintainable.

**Alternatives**

Other approaches to filter and manipulate arrays in JavaScript include:

1. Using `Array.prototype.every()` or `Array.prototype.some()` methods for more complex filtering conditions.
2. Implementing custom filtering functions using arrow functions or traditional function syntax.
3. Utilizing libraries like Lodash or Ramda, which provide additional filtering and manipulation functionality.

Keep in mind that the choice of approach ultimately depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

forEach vs reduce vs map vs filter vs for (to build an array) (version: 0)

Comparing performance of: forEach vs reduce vs filter vs for

Created: 3 years ago by: Guest

Jump to the latest result

forEach

reduce

filter

for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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