Benchmark: Array loop for vs for of vs 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:

for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(item => someFn(item))
for of
for(let item of arr){ someFn(item); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
map
for of

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net. The benchmark measures the execution speed of different approaches for iterating over an array.

**Options Compared**

Three options are compared in this benchmark:

1. **Traditional `for` loop**: This is the most straightforward way to iterate over an array using a variable index.
2. **`for...of` loop**: Introduced in ECMAScript 2015, this loop allows iteration over arrays without the need for explicit indexing or length checks.
3. **Array methods (`map()`)**: Instead of iterating over the array elements directly, this approach uses the `map()` method to apply a function to each element and returns an array with the results.

**Pros and Cons**

1. **Traditional `for` loop**:
	* Pros: Simple and straightforward, works on older browsers that don't support newer syntax.
	* Cons: Requires explicit indexing and length checks, can be error-prone.
2. **`for...of` loop**:
	* Pros: More concise and readable, eliminates the need for explicit indexing or length checks.
	* Cons: May not work in older browsers, requires JavaScript version support (ECMAScript 2015+).
3. **Array methods (`map()`)**:
	* Pros: More concise and expressive, avoids explicit indexing and iteration logic.
	* Cons: Returns an array with the results, which may not be what's expected if only iterating over elements.

**Other Considerations**

* The `map()` method is often used when you need to perform some operation on each element of an array and return a new array with the results. However, in this benchmark, it's being used solely for iteration, which might not be the optimal use case.
* There are other array methods like `forEach()`, but they're not included in this benchmark.

**Library and Special JS Features**

No libraries or special JavaScript features are used in this benchmark. The code relies on standard ECMAScript syntax and functionality.

**Browser Support**

The benchmark is run in Chrome 108, a relatively modern browser that supports the newer `for...of` loop and array methods (`map()`).

**Alternatives**

Other alternatives for iterating over arrays include:

* **Using `forEach()`**: While not included in this benchmark, `forEach()` can be used with callbacks to iterate over an array.
* **Using `reduce()`**: Another array method that allows accumulation of values or other operations on the array elements.
* **Manual iteration using `Array.prototype.forEach()`**: A more explicit and verbose way to iterate over an array using a callback function.

Related benchmarks:

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

Comparing performance of: for vs map vs for of

Created: 5 years ago by: Guest

Jump to the latest result

for

map

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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