Benchmark: Doing foreach right way vs fancy hyped way

Script Preparation code:

var arr = new Array(1000).fill(0);

Tests:

for..of loop
let count = 0; for (const item of arr) { count++; }
forEach - block
let count = 0; arr.forEach(() => { count++; });
forEach - return
let count = 0; arr.forEach(() => count++);
map
let count = 0; arr.map(() => count++);
filter
let count = 0; arr.filter(() => count++);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for..of loop
forEach - block
forEach - return
map
filter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

for..of loop

3.4M/s

forEach - block

786K/s

forEach - return

783K/s

map

434K/s

filter

388K/s

View exact numbers

Test name	Executions per second
✓ for..of loop	3,352,692 Ops/sec
forEach - block	785,977 Ops/sec
forEach - return	782,762 Ops/sec
map	433,867 Ops/sec
filter	388,451 Ops/sec

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, titled "Doing foreach right way vs fancy hyped way," aims to compare the performance of three different approaches for iterating over an array in JavaScript:

1. `for...of` loop
2. `forEach()` method with a callback function that returns a value (i.e., `forEach - return`)
3. `forEach()` method without returning any value (i.e., `forEach - block`)

The test case uses an array of 1000 elements, initialized using the `Array.prototype.fill()` method.

**Test Cases**

Each test case consists of a single benchmark definition, which includes:

* A JavaScript code snippet that demonstrates the respective iteration approach
* A test name indicating the specific approach being tested

Here's a brief explanation of each test case:

1. `for...of` loop: This is a traditional loop that iterates over the array using an iterator.
2. `forEach - return`: In this implementation, the callback function returns a value (`count++`). This is not recommended as it can lead to unexpected behavior and performance issues.
3. `forEach - block`: Similar to the previous test case, but without returning any value from the callback function.
4. `map()`, `filter()`: These are array methods that perform operations on the entire array at once. The benchmark tests their performance with a callback function that increments a counter (`count++`).

**Library and Syntax**

There is no explicit library used in this benchmark, but rather standard JavaScript features.

**Special JS Feature/Syntax**

The `for...of` loop uses a new syntax introduced in ECMAScript 2015 (ES6). This syntax allows for more concise and expressive iteration over arrays.

**Other Alternatives**

For comparison purposes, alternative approaches could include:

* Using `Array.prototype.forEach()` without callback functions
* Implementing a custom iterator using the `ArrayIterator` interface
* Using other languages or libraries with similar iteration mechanisms

However, these alternatives are not tested in this benchmark.

**Pros and Cons of Each Approach**

Here's a brief analysis of each approach:

1. `for...of` loop:
	* Pros: Simple, concise, and widely supported.
	* Cons: May be slower than array methods for large datasets.
2. `forEach - return`:
	* Pros: None
	* Cons: Can lead to unexpected behavior and performance issues due to the returned value.
3. `forEach - block`:
	* Pros: Similar to `for...of` loop, but without returning any value.
	* Cons: Still may not be as efficient as array methods for large datasets.

The performance results from this benchmark will likely favor the `for...of` loop and `forEach - block` approaches, while the `forEach - return` approach may be slower due to its potential side effects.

Doing foreach right way vs fancy hyped way (version: 1) Benchmark.js

Show how those hyped array functions perform. Use array functions! But only where it should be used.

Comparing performance of: `for..of loop vs forEach - block vs forEach - return vs map vs filter`

Created: 4 years ago by: Registered User

Go to the latest result

for..of loop

forEach - block

forEach - return

map

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Doing foreach right way vs fancy hyped way (version: 1) Benchmark.js

Show how those hyped array functions perform. Use array functions! But only where it should be used.

Comparing performance of: for..of loop vs forEach - block vs forEach - return vs map vs filter

Created: 4 years ago by: Registered User

Go to the latest result

for..of loop

forEach - block

forEach - return

map

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `for..of loop vs forEach - block vs forEach - return vs map vs filter`