Benchmark: array.forEach() vs .reduce vs for of vs for

Script Preparation code:

var array = [];
for (var i = 0; i < 10000; i++) {
  array[i] = i;
}

var firstTestResults = [];
var secondTestResults = [];
var thirdTestResults = [];
var fourthTestResults = [];

Tests:

array.forEach()
array.forEach((v) => { let value = v + 10; if (value % 2 === 0) { firstTestResults.push(value); } });
array.reduce()
secondTestResults = array.reduce((acc, value) => { value = value + 10; if (value % 2 === 0) { acc.push(value); } return acc; }, []);
for of
for(val of array) { let value = val + 10; if (value % 2 === 0) { thirdTestResults.push(value); } }
for
for(let i = 0; i < array.length; i++){ let value = array[i] + 10; if (value % 2 === 0) { fourthTestResults.push(value); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.forEach()
array.reduce()
for of
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.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of four different ways to iterate over an array:

1. `array.forEach()`
2. `array.reduce()`
3. `for...of` loop
4. traditional `for` loop

Each iteration is executed on a large array (10,000 elements) and the execution time is measured.

**Options Compared**

The benchmark compares the performance of four different approaches:

* `array.forEach()`: uses the `forEach()` method to iterate over the array.
* `array.reduce()`: uses the `reduce()` method to accumulate values in an array.
* `for...of` loop: uses a modern, iterator-based syntax for iterating over arrays.
* traditional `for` loop: uses a traditional, index-based syntax for iterating over arrays.

**Pros and Cons**

Here's a brief summary of each approach:

* `array.forEach()`: easy to use, concise, and flexible. However, it can be slower than other approaches due to the overhead of the `forEach()` method.
* `array.reduce()`: powerful and efficient, but can be less intuitive for beginners due to its accumulator-based syntax. It's also limited in its ability to handle non-reduction operations.
* `for...of` loop: modern, concise, and easy to use. However, it may not work as expected with older browsers or environments that don't support iterators.
* traditional `for` loop: straightforward, but can be verbose and error-prone.

**Library Used**

None of the benchmark's test cases explicitly use a library. The libraries used in the real-world applications (e.g., Safari 14) are built-in to the browser and not part of the benchmark itself.

**Special JS Feature or Syntax**

The `for...of` loop uses a modern JavaScript feature called iterators, which allows it to iterate over arrays without the need for explicit indexing. The traditional `for` loop also relies on this same concept.

**Other Considerations**

When choosing an iteration method, consider the following factors:

* Readability and maintainability: choose methods that are easy to understand and modify.
* Performance: consider the overhead of each method and choose those with minimal overhead for large datasets.
* Flexibility: choose methods that can handle different types of data and operations.

**Alternatives**

Other iteration methods that could be used in place of the four options listed above include:

* `array.map()`: applies a function to each element in an array.
* `array.every()`, `array.some()`: checks conditions for all or some elements in an array, respectively.
* `setInterval()` or `setTimeout()`: executes a function at fixed intervals.

In conclusion, the benchmark provides a good overview of the performance differences between various iteration methods in JavaScript. By understanding the pros and cons of each approach, developers can choose the most suitable method for their specific use case.

Related benchmarks:

array.forEach() vs .reduce vs for of vs for (version: 0)

Comparing performance of: array.forEach() vs array.reduce() vs for of vs for

Created: 5 years ago by: Guest

Jump to the latest result

array.forEach()

array.reduce()

for of

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