Benchmark: Array loop vs foreach vs map with large array

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000000; i++) {
      arr[i] = i;
    }
  
    function someFn(i) {
      return i * 3 * 8;
    }

Tests:

foreach
arr.forEach(someFn)
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(someFn)

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 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
foreach	288.4 Ops/sec
for	1755.6 Ops/sec
map	178.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmarking test cases and explain what is being tested, along with their pros and cons.

**Benchmark Description**

The benchmark compares the performance of three different approaches for iterating over an array: `forEach`, `for` loop, and `map`.

**Script Preparation Code**

The script preparation code creates a large array (`arr`) with 1 million elements, each initialized to its index value. It also defines a simple function `someFn(i)` that multiplies the input by 3 and 8.

**Html Preparation Code**

There is no HTML preparation code provided, which means the benchmarking test cases are focused solely on JavaScript performance.

**Individual Test Cases**

Each test case corresponds to one of the three iteration approaches:

1. **`foreach`**: This test case uses the `forEach` method to iterate over the array and apply the `someFn(i)` function to each element.
2. **`for` loop**: This test case uses a traditional `for` loop to iterate over the array, calling `someFn(arr[i])` for each element.
3. **`map`**: This test case uses the `map()` method to create a new array with the results of applying `someFn(i)` to each element in the original array.

**Pros and Cons of Each Approach**

Here's a brief summary:

* **`forEach`**:
	+ Pros: Simple, concise, and easy to read. It avoids indexing issues.
	+ Cons: May be slower due to method call overhead and potential cache misses.
* **`for` loop**:
	+ Pros: More control over iteration, can avoid indexing issues. Often faster than `forEach`.
	+ Cons: Can be verbose, prone to errors (e.g., off-by-one issues).
* **`map()`**:
	+ Pros: Returns a new array with the results, avoiding side effects.
	+ Cons: May incur additional overhead due to creating a new array.

**Library and Special JS Features**

None of the test cases explicitly use any libraries or special JavaScript features. The `forEach` method is a built-in array method, while `for` loops and `map()` are also standard constructs.

However, it's worth noting that some modern browsers may optimize `forEach` by using SIMD (Single Instruction, Multiple Data) instructions, which can provide performance benefits. This optimization is not present in the provided benchmarking test cases.

**Other Alternatives**

Alternative iteration approaches could include:

* Using a traditional `for` loop with indexing (`for (var i = 0; i < arr.length; i++)`)
* Using `reduce()` to iterate over the array
* Using a library like Lodash or Ramda for functional programming

Keep in mind that these alternatives may have different performance characteristics and trade-offs.

Overall, this benchmark helps evaluate the performance of three common iteration approaches in JavaScript, providing insights into their strengths and weaknesses.

Related benchmarks:

Array loop vs foreach vs map with large array (version: 0)

Comparing performance of: foreach vs for vs map

Created: 4 years ago by: Guest

Jump to the latest result

foreach

for

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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