Benchmark: fix Array loop vs for of loop vs foreach vs map

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000; 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(item => someFn(item))
for of
for (const i of arr) { someFn(i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map
for of

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 81 on Linux

View result in a separate tab

Test name	Executions per second
foreach	1721827.9 Ops/sec
for	227329.2 Ops/sec
map	101356.6 Ops/sec
for of	215160.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark is designed to compare the performance of four different approaches in JavaScript: `forEach`, `for` loop, `for...of` loop, and `map()` method.

**Test Cases**

Each test case represents a specific scenario where the `someFn` function is applied to an array `arr`. The `someFn` function takes an integer as input and returns its triple multiplied by 8.

The four test cases are:

1. **`foreach`**: Uses the `forEach()` method on the `arr` array, passing the `someFn` function as a callback.
2. **`for` loop**: Uses a traditional `for` loop to iterate over the elements of the `arr` array, calling the `someFn` function for each element.
3. **`for...of` loop**: Uses the `for...of` loop with a const iterator to iterate over the elements of the `arr` array, calling the `someFn` function for each element.
4. **`map()` method**: Uses the `map()` method on the `arr` array, passing an arrow function that calls `someFn` for each element.

**Library Used:**

In this benchmark, no libraries are explicitly used beyond the standard JavaScript features and the `someFn` function.

**Special JS Features/Syntax:**

* **Arrow functions**: Used in the `map()` method test case to define a concise function.
* **For...of loops**: Introduced in ECMAScript 2015 (ES6) as a new way to iterate over arrays. Used in the "for of" loop test case.

**Performance Considerations:**

The performance differences between these approaches can be attributed to various factors, including:

* **Iteration overhead**: The `forEach()` method and `map()` method incur some overhead due to their iterative nature, whereas the traditional `for` loop is generally faster.
* **Memory allocation**: The `map()` method creates a new array with the transformed elements, while the other approaches modify the original array. This can impact performance if working with large datasets.
* **Cache efficiency**: The `for...of` loop and traditional `for` loop are more cache-efficient than the `forEach()` method and `map()` method.

**Other Alternatives:**

If you're interested in exploring alternative approaches, here are a few options:

* **Reduce() method**: Another array method that can be used to apply a function to each element of an array.
* **Lodash's forEach**: If you prefer a more functional programming style, you could use Lodash's `forEach` method.

In summary, this benchmark is designed to help JavaScript developers compare the performance characteristics of different iteration methods and array transformations. By understanding the underlying factors that affect performance in these scenarios, you can optimize your code for better execution times and resource usage.

Related benchmarks:

fix Array loop vs for of loop vs foreach vs map (version: 0)

Comparing performance of: foreach vs for vs map vs for of

Created: 4 years ago by: Guest

Jump to the latest result

foreach

for

map

for of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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