Benchmark: Array loop vs foreach vs map over 1e7 array items

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1e7; 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]); }
map
arr.map(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
foreach	0.5 Ops/sec
for	0.3 Ops/sec
map	0.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark test.

**Benchmark Test Overview**

The benchmark measures the performance of three different ways to iterate over an array in JavaScript: `forEach`, `for` loop, and `map` method. The test uses a large array of 1 million elements and defines a simple function `someFn(i)` that takes an integer argument `i` and returns its value multiplied by 3 and 8.

**Options Compared**

The three options compared are:

1. **forEach**: This option uses the `forEach` method to iterate over the array, where each element is processed in turn.
2. **for loop**: This option uses a traditional `for` loop to iterate over the array, where the index variable `i` is incremented manually.
3. **map**: This option uses the `map` method to create a new array with the results of applying the `someFn` function to each element in the original array.

**Pros and Cons**

*   **forEach**:
    *   Pros: Simple to use, concise code.
    *   Cons: May have performance overhead due to callback function invocation, which can be slower than direct array indexing or loop iterations.
*   **for loop**:
    *   Pros: Direct access to the array's elements without additional function calls, potentially faster execution.
    *   Cons: More verbose and error-prone code, requiring manual index management.
*   **map**:
    *   Pros: Efficient way to create a new array with transformed data, leveraging the browser's optimized array operations.
    *   Cons: Creates an intermediate array in memory, which may consume additional resources for large datasets.

**Library Usage**

None of the test cases explicitly use any external libraries. The `map` method is part of the native JavaScript API.

**Special JS Features or Syntax**

There are no explicit mentions of special JavaScript features or syntax in this benchmark.

**Alternative Approaches**

Other alternatives to compare with these options could be:

*   Using **filter** and **reduce** methods for array processing.
*   Employing more advanced iteration techniques, such as using `Array.prototype.reduce()` or custom recursive functions.
*   Utilizing web workers or other parallel computing approaches to distribute the workload.

However, the primary focus of this benchmark is on demonstrating the performance differences between three fundamental ways to iterate over an array in JavaScript: **forEach**, **for** loop, and **map** method.

Related benchmarks:

Array loop vs foreach vs map over 1e7 array items (version: 0)

Comparing performance of: foreach vs for vs map

Created: 3 years ago by: Guest

Jump to the latest result

foreach

for

map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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