Benchmark: for-vs-foreach-vs-forof

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000; i++) {
  arr[i] = i;
}
function someFn(i) {
  return i * 3 * 8;
}

Tests:

forEach
arr.forEach(function (item){ someFn(item); });
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
for of
for(xxx of arr){ someFn(xxx); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for
for of

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Yandex Browser 25 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach	1779152.8 Ops/sec
for	582598.9 Ops/sec
for of	14347.9 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 provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of three different loops in JavaScript: `forEach`, `for` (traditional loop), and `for...of` (a newer, more modern loop). The test case creates an array of 1000 elements, initializes each element with its index, and defines a function `someFn` that takes an input and returns the result of multiplying it by 3 and 8.

**Loop Comparison**

Here's what's being compared:

1. **forEach**: This loop iterates over the array using the `forEach` method, which calls the provided callback function once for each element in the array.
2. **for**: This traditional loop uses a manual index variable to iterate over the array. It's more verbose than the `forEach` loop but provides direct access to the index and array length.
3. **for...of**: This newer loop is designed specifically for iterating over arrays and other iterable objects. It's concise and expressive, but some developers might find it less familiar or performance-optimized compared to traditional loops.

**Pros and Cons**

Here are the pros and cons of each approach:

1. **forEach**:
	* Pros: Concise, easy to read, and maintainable.
	* Cons: May incur additional overhead due to the callback function invocation.
2. **for**:
	* Pros: Provides direct access to the index and array length, which can be beneficial for certain use cases.
	* Cons: More verbose and error-prone compared to `forEach` or `for...of`.
3. **for...of**:
	* Pros: Concise, expressive, and designed specifically for iterating over arrays and other iterable objects.
	* Cons: May not be as widely supported or optimized compared to traditional loops.

**Library and Special Features**

In this benchmark, the only library used is `Array.prototype.forEach`. There are no special JavaScript features or syntaxes being tested.

**Other Alternatives**

If you're interested in exploring alternative loop constructs, here are a few:

1. **Array.prototype.map()**: While not a traditional loop, `map()` can be used to iterate over an array and transform each element.
2. **Set**: If you need to work with unique values or perform set operations, `Set` objects provide an efficient way to iterate and manipulate data.

Keep in mind that the performance differences between these loops are usually negligible for small to medium-sized datasets. However, as the dataset grows, the overhead of callback functions or additional loop iterations can become significant.

Related benchmarks:

for-vs-foreach-vs-forof (version: 0)

Comparing performance of: forEach vs for vs for of

Created: 8 years ago by: Guest

Jump to the latest result

forEach

for

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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