Benchmark: Array loop vs foreach vs map vs for of wit entries

Script Preparation code:

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

Tests:

foreach
const res = [] arr.forEach(function (item){ res.push(someFn(item)) })
for
const res = [] for (var i = 0, len = arr.length; i < len; i++) { res.push(someFn(arr[i])) }
map
const res = arr.map(item => someFn(item))
for of
const res = [] for (const [i, el] of arr.entries()) { res.push(someFn(el)) }

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:

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.

**Overview**

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The test measures the performance of four different approaches to iterate over an array: `foreach`, `for`, `map`, and `for...of` loops.

**Benchmark Definition**

The benchmark definition is not explicitly stated, but it can be inferred from the provided `Script Preparation Code`. The script creates a large array (`arr`) with 100,000 elements and defines a function `someFn` that takes an integer `i` as input and returns `i * 3 * 8`. This function is used to calculate a result for each element in the array.

**Options Compared**

The benchmark compares the performance of four different approaches:

1. **Foreach**: Uses the `forEach` method to iterate over the array, calling `someFn` for each element.
2. **For**: Uses a traditional `for` loop to iterate over the array, calling `someFn` for each element.
3. **Map**: Uses the `map` method to create a new array with the results of applying `someFn` to each element in the original array.
4. **For...of**: Uses the `for...of` loop syntax to iterate over the array, calling `someFn` for each element.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Foreach**:
	* Pros: Simple to implement, easy to read.
	* Cons: Can be less efficient due to overhead from the `forEach` method.
2. **For**:
	* Pros: Still relatively simple, widely supported.
	* Cons: Requires manual indexing, can lead to errors if not implemented correctly.
3. **Map**:
	* Pros: Creates a new array with the results, easy to understand.
	* Cons: Can be less efficient due to creation of a new array, uses more memory.
4. **For...of**:
	* Pros: Simplifies iteration over arrays, easy to read.
	* Cons: Still relatively new syntax, may not be supported in older browsers.

**Library**

None of the provided test cases use any external libraries.

**Special JS Feature or Syntax**

The `for...of` loop is a special feature introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and other iterable objects without manual indexing. The `map` method also uses this syntax, but it's not limited to array iteration.

**Other Alternatives**

In addition to the four tested approaches, there are other ways to iterate over arrays in JavaScript:

1. **forEach**: A widely supported method for iterating over arrays.
2. **Lodash's `forEach` function**: An external library that provides a more robust implementation of the `forEach` method.
3. **Iterators and generators**: Advanced techniques for iterating over arrays, but not tested in this benchmark.

Note: The provided test results are specific to Chrome 90 running on Windows Desktop.

Related benchmarks:

Array loop vs foreach vs map vs for of wit entries (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>

Fastest: N/A

Slowest: N/A

No previous run results

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