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

For
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
For/of
for (const a of arr) { someFn(a); }
Foreach
arr.forEach(function (item){ someFn(item); })
Map
arr.map(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For
For/of
Foreach
Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

Browser/OS: Chrome 85 on Windows

View result in a separate tab

Test name	Executions per second
For	3992.3 Ops/sec
For/of	7872.6 Ops/sec
Foreach	6762.1 Ops/sec
Map	8447.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmark that compares the performance of four different approaches: `for` loop, `for/of` loop, `forEach` loop, and `map` method.

**Options Compared**

The options compared in this benchmark are:

1. **For Loop**: A traditional `for` loop with an index variable (`i`) to iterate over the array elements.
2. **For/of Loop**: A newer `for/of` loop that uses a for-of statement to iterate over the array elements, which is more concise and expressive than traditional `for` loops.
3. **ForEach Loop**: An older `forEach` method that iterates over an array of values using a callback function.
4. **Map Method**: The `map()` method creates a new array with the results of applying a provided function to every element in this array.

**Pros and Cons of Each Approach**

1. **For Loop**:
	* Pros: Simple, well-established, and widely supported.
	* Cons: Can be verbose, especially when dealing with large arrays or complex logic.
2. **For/of Loop**:
	* Pros: More concise and expressive than traditional `for` loops, easier to read and maintain.
	* Cons: Requires support for the new syntax, which might not be available in older browsers.
3. **ForEach Loop**:
	* Pros: Easy to use, especially when working with callback functions.
	* Cons: Less efficient than other approaches, as it creates a new array with the results of applying the callback function to each element.
4. **Map Method**:
	* Pros: More concise and expressive than traditional loops, creates a new array with the desired output.
	* Cons: Requires support for the `map()` method, which might not be available in older browsers.

**Library Used (if applicable)**

In this benchmark, none of the options use an external library. However, if we consider the `forEach` loop and `map` method as part of the ECMAScript standard, they are built-in functions provided by JavaScript.

**Special JS Features or Syntax**

* **For/of Loop**: This is a new syntax introduced in ECMAScript 2017 (ES7). It allows for more concise and expressive way of iterating over arrays and other iterable objects.
* **Map Method**: The `map()` method was introduced in ECMAScript 2009 (ES5) as part of the standard library.

**Other Alternatives**

If you need to iterate over an array or create a new array with transformed values, other alternatives might be:

1. `reduce()`: A function that applies a reduction function to each element in an array and returns a single value.
2. Array.prototype.filter(): A method that creates a new array with all elements that pass the test implemented by the provided function.
3. Loops using callbacks (e.g., `arr.forEach(function(item) { /* do something */ });`)

Keep in mind that these alternatives might have different performance characteristics and use cases compared to the options tested in this benchmark.

**Tips for Software Engineers**

When working with JavaScript, it's essential to consider the trade-offs between conciseness, readability, performance, and compatibility when choosing an iteration approach. In general:

* Use `for/of` loops when you need concise and expressive code, and your target browser supports ES7+ syntax.
* Use traditional `for` loops or `forEach` loops when you need more control over the iteration process or when supporting older browsers is necessary.
* Consider using the `map()` method when creating a new array with transformed values, but be aware of performance implications if dealing with large datasets.

Related benchmarks:

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

Based on: https://www.measurethat.net/Benchmarks/Show/2090/0/array-loop-vs-foreach-vs-map

Comparing performance of: For vs For/of vs Foreach vs Map

Created: 4 years ago by: Registered User

Jump to the latest result

For

For/of

Foreach

Map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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