Benchmark: for vs foreach vs for..of, but with rich object array, that does something

Script Preparation code:

var array = [...Array(100000)].map(() => ({
    label: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10),
    value: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10)
}))

var sideEffect = (value) => window.random = value;

Tests:

for
for (var i = 0, n = array.length; i < n; i++) { sideEffect(array[i]); }
foreach
array.forEach((i) => sideEffect(i));
for..of
for (var i of array) { sideEffect(i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for..of

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.

**Benchmark Overview**

The provided benchmark compares the performance of three different loop constructs in JavaScript: `for`, `forEach`, and `for...of`. The test case uses a rich object array, which is created using `Array.from()` and then mapped to generate 100,000 objects with random properties. The loop iterates over this array and applies a side effect function `sideEffect` to each element.

**Loop Constructs Comparison**

### For Loop

* Description: Traditional `for` loop that uses an index variable `i` and increments it manually.
* Pros:
	+ Widely supported across browsers and environments.
	+ Easy to understand and implement for beginners.
* Cons:
	+ Requires manual indexing, which can lead to errors if not done correctly.

### Foreach Loop

* Description: The `forEach()` method is called on an array, passing a callback function that executes for each element in the array.
* Pros:
	+ Simplifies loop logic and eliminates manual indexing.
	+ Can be more concise than traditional `for` loops.
* Cons:
	+ May have performance overhead due to the need to call the callback function.

### For...Of Loop

* Description: The `for...of` loop is similar to a traditional `for` loop but uses the iterator protocol instead of an index variable.
* Pros:
	+ Simplifies loop logic and eliminates manual indexing, making it more concise than traditional `for` loops.
	+ Can be more efficient than traditional `for` loops due to its use of iterators.
* Cons:
	+ Less widely supported across browsers and environments (although it has been added in modern versions of Firefox).

**Library Usage**

The `sideEffect` function uses the global `window` object, which is a built-in JavaScript object that provides access to various system-specific parameters, properties, and methods. In this case, `window.random` is set to the value passed as an argument.

**Special JavaScript Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

If you're looking for alternative loop constructs, consider the following:

* **While Loop**: A `while` loop that continues to execute as long as a condition is true.
* **For-In Loop**: An older way of looping over arrays and objects using an index variable.
* **Reduce() Method**: A method on arrays that applies a callback function to each element, returning a single value.

These alternatives may have their own trade-offs in terms of performance, conciseness, and readability.

Related benchmarks:

for vs foreach vs for..of, but with rich object array, that does something (version: 0)

Compare loop performance

Comparing performance of: for vs foreach vs for..of

Created: 5 years ago by: Guest

Jump to the latest result

for

foreach

for..of

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