Benchmark: Array loop vs for...of 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(function (item){ someFn(item); })
for..of
for (let item of arr) { someFn(item); }
map
arr.map(item => someFn(item))
for
for (let i = 0; i < arr.length; i++) { someFn(arr[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for..of
map
for

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Browser/OS: Firefox 88 on Windows 7

View result in a separate tab

Test name	Executions per second
foreach	107185.8 Ops/sec
for..of	38252.7 Ops/sec
map	38285.5 Ops/sec
for	652384.4 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 provided JSON data to understand what is being tested and the different approaches being compared.

**Benchmark Definition**

The benchmark definition represents a JavaScript function that performs an operation on an array. The function `someFn` takes an input `i` and returns its product with 3 and 8. This function will be executed on the array `arr`, which contains 1000 elements initialized with values from 0 to 999.

**Script Preparation Code**

This code prepares the test environment by creating an empty array `arr` and populating it with values using a traditional `for` loop. The `someFn` function is also defined and returned.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark results are likely being measured in a headless browser or a Node.js environment.

**Individual Test Cases**

The test cases compare different approaches to iterate over the array:

1. **foreach**: Uses the `forEach` method, which calls the callback function once for each element in the array.
2. **for..of**: Uses the `for...of` loop, which iterates over the elements of an array using a special syntax.
3. **map**: Uses the `map` method, which applies a transformation to each element of the array and returns a new array.
4. **for**: Uses a traditional `for` loop to iterate over the indices of the array.

**Library: None**

There is no library being used in this benchmark. The test cases only rely on built-in JavaScript methods and syntax.

**Special JS Feature: For...of Loop**

The `for...of` loop is a special syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays using a more concise syntax than traditional loops. In this benchmark, the `for...of` loop is compared to other iteration methods.

**Pros and Cons of Different Approaches**

1. **foreach**: Pros: simple and easy to use. Cons: can be slower due to the overhead of function calls.
2. **for...of**: Pros: concise syntax, efficient. Cons: may not work well with older browsers or environments that don't support ES6 features.
3. **map**: Pros: returns a new array with transformed elements, which can simplify subsequent operations. Cons: creates a new array, which can be memory-intensive for large datasets.
4. **for**: Pros: traditional and widely supported. Cons: less concise than other methods.

**Other Alternatives**

Some alternative approaches to iterate over arrays include:

* Using `Array.prototype.forEach` with an arrow function
* Using `Array.prototype.reduce`
* Using `Array.prototype.every` or `Array.prototype.some`

These alternatives may offer different trade-offs in terms of performance, memory usage, and code conciseness.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

foreach

for..of

map

for

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):