Benchmark: Looping With Stuff

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

// Generate a large dataset (1 million numbers)
const largeDataset = Array.from({ length: 1_000_000 }, (_, i) => i + 1);

// Function using for...of loop
function testForOfLoop(arr) {
    console.time("for...of loop");
    let sum = 0;
    for (const num of arr) {
        if (num === 500_000) continue; // Skip 500,000
        if (num === 900_000) break; // Stop at 900,000
        sum += num;
    }
    console.timeEnd("for...of loop");
    return sum;
}

// Function using forEach loop
function testForEachLoop(arr) {
    console.time("forEach loop");
    let sum = 0;
    arr.forEach((num) => {
        if (num === 500_000) return; // Doesn't break out
        if (num === 900_000) return; // Still loops
        sum += num;
    });
    console.timeEnd("forEach loop");
    return sum;
}

// Function using for loop
function testForLoop(arr) {
    console.time("for loop");
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 500_000) continue; // Skip 500,000
        if (arr[i] === 900_000) break; // Stop at 900,000
        sum += arr[i];
    }
    console.timeEnd("for loop");
    return sum;
}

Tests:

Forof
testForOfLoop(largeDataset)
ForEach
testForEachLoop(largeDataset)
For
testForLoop(largeDataset)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Forof
ForEach
For

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Forof	90.2 Ops/sec
ForEach	59.2 Ops/sec
For	492.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Looping With Stuff" tests the performance of three different looping constructs in JavaScript when iterating over a large dataset of one million numbers. The primary focus is on comparing the `for...of` loop, the `forEach` method, and the traditional `for` loop. Each approach has its strengths and trade-offs, which are critical to understand when optimizing performance in JavaScript.

### Options Compared

1. **For...of Loop**
   - **Test Name**: Forof
   - **Implementation**: The `for...of` loop is used to iterate over iterable objects (like arrays) without needing to manage an index explicitly.
   - **Pros**:
     - Simplicity: Easy to read and write.
     - Good for handling complex iterables (like sets or maps).
   - **Cons**:
     - Performance: Slower than both `for` and `forEach` in this specific benchmark since it introduces overhead due to iterator protocols.
     - Cannot break or return from the outer function within a callback; anything that points to specific control flows (like `continue` and `break`) only acts at the loop level.

2. **ForEach Loop**
   - **Test Name**: ForEach
   - **Implementation**: The `forEach` method executes a provided function once for each array element.
   - **Pros**:
     - Clean syntax that emphasizes operation on each element.
     - Handles function scope effortlessly with closures available in callbacks.
   - **Cons**:
     - Does not allow breaking out of the loop; continues to run for all elements even if conditions to stop (like `if` statements) are met.
     - Generally slower than the traditional `for` loop because of additional function calls and closure overhead.

3. **For Loop**
   - **Test Name**: For
   - **Implementation**: The traditional `for` loop, which involves index manipulation, is explicitly defined in the loop's structure.
   - **Pros**:
     - High performance as it has minimal overhead, especially with large datasets.
     - Greater control over the loop’s execution, allowing for both `continue` and `break` statements to work as intended, improving potential early termination.
   - **Cons**:
     - Slightly more complex syntax, requiring management of loop index and array length.
     - Risk of off-by-one errors if the loop conditions are mismanaged.

### Summary of Results
The benchmarking results indicate the following performances:
- **For Loop**: 825.45 executions per second, making it the fastest option.
- **For...of Loop**: 283.11 executions per second, significantly slower than the traditional `for` loop.
- **ForEach Loop**: 116.20 executions per second, showing the lowest performance among the three options.

### Considerations
When deciding on which loop to use, developers should consider:
- **Code readability**: For small iterations or simple use cases, `for...of` or `forEach` can be more maintainable.
- **Performance**: For large datasets and scenarios where performance is critical, the traditional `for` loop is usually the best choice.
- **Control Flow**: If you need to break out or skip iterations based on conditions, `for` provides better control.

### Alternatives
Apart from these direct comparisons, other JavaScript looping mechanisms include:
- **Map Method**: Creates a new array populated with results from calling a provided function on every element. Though not primarily used for looping, it’s often favored for transforming arrays.
- **While and Do-While Loops**: Provide a more generic way of iteration with less predictable entry and exit conditions.
- **Recursive Functions**: Used in specific problems but can have performance drawbacks due to stack size limits.

Overall, the choice of looping construct should take into account both the specific use case and performance considerations, especially in applications where computational efficiency is critical.

Related benchmarks:

Looping With Stuff (version: 1)

Loop some stuff haha

Comparing performance of: Forof vs ForEach vs For

Created: one month ago by: Guest

Jump to the latest result

Forof

ForEach

For

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):