Benchmark: ForEach vs ForOf vs For

HTML Preparation code:


<div id=''></div>

Script Preparation code:

function generateTestArray() {
  const courses = Array.from({ length: 1000 }).map((_, i) => ({
    id: `course-${i+1}`, 
    contents: Array.from({ length: 1000 }).map((_, i) => ({id: `content-${i+1}`, title: `Lorem ${i+1}`})) 
  }))
  return courses
}

Tests:

forEach
const testArray = generateTestArray() const choosedNumber = 998 testArray.forEach(c => { const contents = c.contents const findedContent = contents.findIndex(content => content.id === `content-${choosedNumber}`) if (findedContent !== -1) { console.log(`finded content: ${contents[findedContent].title}`) } })
for...of
const testArray = generateTestArray() const choosedNumber = 998 for (const c of testArray) { const contents = c.contents const findedContent = contents.findIndex(content => content.id === `content-${choosedNumber}`) if (findedContent !== -1) { console.log(`finded content: ${contents[findedContent].title}`) } }
for
const testArray = generateTestArray() const choosedNumber = 998 for (let i = 0; i < testArray.length; i++) { const contents = testArray[i].contents const findedContent = contents.findIndex(content => content.id === `content-${choosedNumber}`) if (findedContent !== -1) { console.log(`finded content: ${contents[findedContent].title}`) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
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 dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

MeasureThat.net is a platform that allows users to create and run JavaScript microbenchmarks, comparing different approaches for common use cases. In this case, we have three test cases: `forEach`, `for...of`, and `for`. The benchmark measures which approach is the fastest in terms of execution speed.

**Benchmark Definitions**

The provided JSON defines two benchmarking scenarios:

1. **ForEach**: This test uses the traditional `Array.prototype.forEach()` method to iterate over an array.
2. **ForOf**: This test uses the new `Array.prototype.of()` method, introduced in ECMAScript 2019, to create a tuple-like object that represents an array.
3. **For**: This test uses a traditional `for` loop to iterate over an array.

**Options Compared**

The three options are compared as follows:

* **ForEach**: Iterates over the array using `Array.prototype.forEach()`.
	+ Pros: Widely supported, easy to read and write.
	+ Cons: Can be slower than other approaches due to method call overhead.
* **ForOf**: Creates a tuple-like object representing the array and iterates over it using the new `Array.prototype.of()` method.
	+ Pros: Allows for more concise code, can be faster due to reduced method call overhead.
	+ Cons: Less widely supported (currently only in modern browsers), requires additional setup.
* **For**: Uses a traditional `for` loop to iterate over the array.
	+ Pros: Fastest execution speed among the three options, widely supported.
	+ Cons: Can be more verbose and harder to read than other approaches.

**Library Used**

None of the tests explicitly use any external libraries. However, the `Array.prototype.of()` method is a new feature introduced in ECMAScript 2019, which might not be supported in older browsers.

**Special JS Features/Syntax**

The only special JavaScript feature used in this benchmark is the new `Array.prototype.of()` method, which was introduced in ECMAScript 2019. This method allows for more concise code and can be faster due to reduced method call overhead.

**Alternatives**

Other alternatives for iterating over arrays include:

* **Using a custom function**: Creating a custom function to iterate over the array can provide more control over the iteration process.
* **Using `Array.prototype.map()`**: Using `Array.prototype.map()` instead of `forEach()` or traditional loops can be useful for transformations and side effects.
* **Using WebAssembly (WASM)**: For extremely performance-critical use cases, using WASM might provide even faster execution speeds.

Overall, the choice of iteration method depends on the specific requirements of your application, including code readability, maintainability, and performance.

Related benchmarks:

ForEach vs ForOf vs For (version: 0)

Comparing performance of: forEach vs for...of vs for

Created: 2 years ago by: Guest

Jump to the latest result

forEach

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