Benchmark: while vs for vs forEach vs for of - 1000000 - calc exponent

Script Preparation code:

var arr =new Array(1000000);

Tests:

while
let i=0; while(i < arr.length) { const exp = arr[i] ** 2; i++; }
for
for(let i=0; i<arr.length; i++) { const exp = arr[i] ** 2; }
forEach
arr.forEach((element) => { const exp = element ** 2; });
for of
for(const element of arr) { const exp = element ** 2; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while
for
forEach
for of

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**

The benchmark definition is a JSON object that describes the test case. In this case, it's comparing four different loop constructs:

1. `while`
2. `for`
3. `forEach` (new ES6 spread operator with `concat()` method and `push`)
4. `for of`

The test case involves calculating the square of each element in an array of 1 million elements using the exponentiation operator (`**`).

**Script Preparation Code**

The script preparation code is a JavaScript snippet that initializes an array with 1 million elements:
```javascript
var arr = new Array(1000000);
```
This code sets up the input data for the test case.

**Html Preparation Code**

There is no HTML preparation code provided, which means that this benchmark doesn't involve any DOM-related tests or rendering-related overhead.

**Loop Constructs Comparison**

Now, let's dive into the loop constructs comparison:

1. **`while`**: This loop construct uses a traditional `while` loop with an incrementing index variable `i`. The loop continues as long as `i` is less than the length of the array.
2. **`for`**: This loop construct uses a traditional `for` loop with an explicit loop counter variable `i`. The loop iterates over the indices of the array using `i`.
3. **`forEach`** (ES6 spread operator): This loop construct uses the `forEach` method, which is a part of the ECMAScript standard since ES6. It applies a provided callback function to each element in the array, without requiring an explicit index variable.
4. **`for of`**: This loop construct uses the `for...of` loop syntax, which was introduced in ECMAScript 2015 (ES6). It iterates over the elements of the array using a value and a key (index).

**Library: None**

There are no libraries used in this benchmark. The code is a straightforward implementation of each loop construct.

**Special JS Feature/Syntax: `for...of`**, **`forEach`**

The `for...of` loop syntax was introduced in ECMAScript 2015, and the `forEach` method was also introduced in ES6. These features are part of the modern JavaScript language standard.

**Pros and Cons of Each Approach**

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

1. **`while`**:
	* Pros: simple, easy to understand, works well for small arrays.
	* Cons: can be verbose for large arrays, may require more CPU cycles due to branching.
2. **`for`**:
	* Pros: efficient, easy to understand, works well for small and large arrays.
	* Cons: may be less readable than `while` loops for complex logic.
3. **`forEach` (ES6 spread operator)**:
	* Pros: concise, easy to read, efficient, works well for large datasets.
	* Cons: may require additional imports or setup if not familiar with the `forEach` method.
4. **`for of`**:
	* Pros: concise, easy to read, efficient, works well for arrays and other iterable objects.
	* Cons: may be less intuitive than traditional `for` loops.

**Alternatives**

If you're looking for alternatives to these loop constructs, here are a few options:

1. **`while`**: You could use a different iteration construct like `do-while` or an array-based loop (e.g., using `Array.prototype.findIndex()`).
2. **`for`**: Consider using iterative algorithms that don't rely on explicit indexing, like recursive functions.
3. **`forEach`**: If you prefer a more functional programming style, consider using libraries like Lodash or Underscore.js, which provide similar functionality.
4. **`for of`**: For arrays and other iterable objects, `for...of` is usually the most efficient and readable choice.

I hope this explanation helps!

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
while	5.9 Ops/sec
for	6.4 Ops/sec
forEach	231.8 Ops/sec
for of	54.2 Ops/sec

Related benchmarks:

while vs for vs forEach vs for of - 1000000 - calc exponent (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: while vs for vs forEach vs for of

Created: 3 years ago by: Guest

Jump to the latest result

while

for

forEach

for of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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