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

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(function (item){ someFn(item); })
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(item => someFn(item))
for of
for (let 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: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Linux

View result in a separate tab

Test name	Executions per second
foreach	10864.6 Ops/sec
for	5445.9 Ops/sec
map	9812.1 Ops/sec
for of	11551.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the JavaScript microbenchmark provided by MeasureThat.net.

The benchmark compares four different approaches to iterate over an array in JavaScript:

1. **For loop**: A traditional `for` loop that iterates over the array using its index and value.
2. **forEach**: The `forEach` method, which is a part of the Array prototype. It takes a callback function as an argument and executes it for each element in the array.
3. **Map**: The `map()` method, which creates a new array by applying a given function to every element in the original array.
4. **For...of loop**: A newer `for` loop syntax that uses a "for-of" expression to iterate over the array.

Let's discuss each approach:

**Pros and Cons:**

* **For loop**: Pros - more control, performance is generally better for small arrays. Cons - can be error-prone, especially when dealing with large arrays or complex logic.
* **ForEach**: Pros - concise, easy to use, and efficient for most cases. Cons - might be slower than traditional `for` loops for very large arrays, and can be less intuitive for those unfamiliar with the method.
* **Map**: Pros - concise and expressive, well-suited for transformations or filtering data. Cons - creates a new array, which can be memory-intensive for large datasets, and might not be suitable for operations that modify the original array.
* **For...of loop**: Pros - concise, readable, and efficient for most cases. Cons - requires support for the newer `for...of` syntax in older browsers or versions of JavaScript.

**Library/Library purpose:**

None of the approaches rely on any external libraries. The test data is simply an array of numbers created using JavaScript's `Array.prototype.push()` method.

**Special JS features:**

The benchmark uses the newer `for...of` loop syntax, which was introduced in ECMAScript 2015 (ES6). This syntax allows for a more concise and expressive way to iterate over arrays. However, it may not be supported by older browsers or versions of JavaScript.

Other alternatives to consider:

* **Lodash.forEach**: A popular utility library that provides a `forEach` function, which can be used instead of the built-in `Array.prototype.forEach()` method.
* **Underscore.forEach**: Another utility library that offers an `each` function, which serves a similar purpose as `Array.prototype.forEach()`.
* **ES6's Array.prototype.forEach() with additional methods**: Some libraries or frameworks might use `forEach` with additional methods to enhance its functionality.

Related benchmarks:

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

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

Created: 3 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 2 months ago):