Benchmark: Performance of JS .foreach, for, for...of

Script Preparation code:

function generateTestArray() {
    const result = [];
    for (let i = 0; i < 1000000; ++i) {
        result.push({
            a: i,
            b: i / 2,
            x: 0,
            y: 0,
        });
    }
    return result;
}

Tests:

For
const array = generateTestArray(); for (let i = 0; i < array.length; i++) { array[0].x = array[0].a + array[0].b; array[0].y = array[0].a + array[0].b * 2; }
For...Of
const array = generateTestArray(); for (const a of array) { a.x = a.a + a.b; a.y = a.a + a.b * 2; }
ForEach
const array = generateTestArray(); array.forEach(a => { a.x = a.a + a.b; a.y = a.a + a.b * 2; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For
For...Of
ForEach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

For

38/s

For...Of

33/s

ForEach

32/s

View exact numbers

Test name	Executions per second
✓ For	38 Ops/sec
For...Of	33 Ops/sec
ForEach	32 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of different loop constructs in JavaScript: `for`, `for...of`, and `.forEach`. The goal is to compare the execution speed of these loops on a specific test case, which creates an array of 1 million objects and updates their properties.

**Loop Constructs Comparison**

### For Loop

The traditional `for` loop uses an explicit index variable (`i`) to iterate over the array. It updates the index value at each iteration using `++i`.

Pros:

* Wide support across different browsers and platforms.
* Easy to understand and implement for developers familiar with the construct.

Cons:

* May have performance overhead due to unnecessary index calculations.

### For...Of Loop

The `for...of` loop uses a more modern approach, iterating over arrays using a special syntax. It does not require an explicit index variable and is often considered more readable.

Pros:

* Efficient iteration without the need for manual index management.
* Can be more concise and expressive in code.

Cons:

* May not support all browsers or platforms (although it's widely supported).

### .ForEach() Method

The `.forEach()` method uses a callback function to process each element of an array. It provides a functional programming style for loop execution.

Pros:

* Convenient and intuitive syntax for processing arrays.
* Often faster than traditional loops due to its optimized implementation.

Cons:

* May not provide direct control over iteration, which can be limiting for some use cases.

**Library and Framework Considerations**

In the provided benchmark, no explicit libraries or frameworks are used. However, `.forEach()` is a built-in method on arrays in JavaScript. If you were to create your own loop-based implementation without this convenience, you would need to manually manage an index variable and control flow logic, which might result in less efficient code.

**JavaScript Features**

The benchmark does not explicitly use any special JavaScript features beyond the three loop constructs mentioned. However, it's essential to note that using `for...of` or `.forEach()` loops might leverage more modern language features (like support for array methods). If you're interested in exploring other advanced JavaScript features, such as async/await, Promises, or Arrow functions, feel free to consider incorporating them into your benchmark.

**Alternatives and Similar Benchmarks**

For those interested in exploring alternative loop constructs or performance testing tools:

* **NativeArray methods**: Instead of using `.forEach()`, you could use other native array methods like `map()` or `reduce()`.
* **Iterators and Generators**: Consider exploring iterators, generators, or async/await for more complex iteration scenarios.
* **Benchmarking frameworks**: Look into dedicated benchmarking libraries or tools, such as Benchmark.js or micro-benchmarking, which provide a structured way to create and compare performance benchmarks.

These alternatives offer different perspectives on loop execution and performance optimization in JavaScript.

Performance of JS .foreach, for, for...of (version: 0)

Comparing performance between different loops in javascript

Comparing performance of: `For vs For...Of vs ForEach`

Created: 2 years ago by: Guest

Go to the latest result

For

For...Of

ForEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Performance of JS .foreach, for, for...of (version: 0)

Comparing performance between different loops in javascript

Comparing performance of: For vs For...Of vs ForEach

Created: 2 years ago by: Guest

Go to the latest result

For

For...Of

ForEach

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 vs For...Of vs ForEach`