Benchmark: loops-perf - MeasureThat.net

HTML Preparation code:

<script>
  var arr = new Array(250);
  var out = new Array(250);
</script>

Script Preparation code:

arr.fill(Math.random());
out.length = 0;

Tests:

for of
for (const item of arr) { out.push(item); }
for in
for (const i in arr) { out.push(arr[i]); }
for
for (var i = 0; i < arr.length; ++i) { out.push(arr[i]); }
while
var i = 0; while (i < arr.length) { out.push(arr[i]); i++; }
forEach() with function
arr.forEach(function(x) { out.push(x); });
forEach() with closure
arr.forEach(x => out.push(x));
for, reversed
for (var i = arr.length; i--;) { out.push(arr[i]); }
for, cached length
for (var i = 0, len = arr.length; i < len; ++i) { out.push(arr[i]); }
while, reversed
var i = arr.length; while (i-- > 0) { arr[i]; }
while, cached length
var i = 0; var len = arr.length; while (i < len) { out.push(arr[i]); i++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
for in
for
while
forEach() with function
forEach() with closure
for, reversed
for, cached length
while, reversed
while, cached length

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON data and benchmark results.

**Benchmark Definition**

The benchmark measures the performance of different JavaScript iteration methods (e.g., `for`, `while`, `forEach`) on an array of 250 elements. The test case creates two arrays, `arr` and `out`, each with a length of 250. The script preparation code fills the `arr` array with random values, and the HTML preparation code sets up the necessary variables.

**Individual Test Cases**

The test cases compare different iteration methods:

1. **`for of`**: Uses the `for...of` loop to iterate over the `arr` array.
	* Pros: Easy to read and write, concise syntax.
	* Cons: Not as performant as other methods (see results).
2. **`for in`**: Uses the `for...in` loop to iterate over the `arr` array's indices.
	* Pros: Legacy support for older browsers, easy to implement.
	* Cons: Not suitable for arrays with sparse or non-numeric indices, slower than other methods (see results).
3. **`for`**: Uses a traditional `for` loop to iterate over the `arr` array.
	* Pros: Control over iteration logic, performance comparable to `while`.
	* Cons: Less concise syntax compared to `for of` or `forEach`.
4. **`while`**: Uses a `while` loop to iterate over the `arr` array.
	* Pros: Good performance, flexible termination condition.
	* Cons: Can be harder to read and write than other methods.
5. **`forEach` (with function)**: Uses the `Array.prototype.forEach()` method with a callback function.
	* Pros: Easy to implement, concise syntax.
	* Cons: Not as performant as other methods (see results).
6. **`forEach` (with arrow function)**: Same as above, but uses an arrow function instead of a regular function.
7. **`while` (cached length)**: Uses a `while` loop with a cached array length to iterate over the `arr` array.
	* Pros: Good performance, avoids repeated property accesses.
	* Cons: Requires extra caching logic.
8. **`for` (reversed)**: Uses a traditional `for` loop to iterate over the `arr` array in reverse order.
	* Pros: Performance comparable to `while`, control over iteration logic.
	* Cons: Less concise syntax compared to other methods.
9. **`while` (cached length)**: Same as above, but uses a `while` loop with a cached array length.

**Benchmark Results**

The results show the execution speed of each test case in terms of iterations per second (IPS). The fastest method is:

* `for` and `while` loops (both ~18 IPS) on par with each other
* `forEach` with function (~17 IPS)
* `forEach` with arrow function (~16 IPS)
* `for of` loop (~14 IPS)
* `for in` loop (~9 IPS)

The slowest methods are:

* `while` loop with cached length (~3 IPS) and `for` loop with cached length (~2 IPS)

**Conclusion**

The results suggest that using a traditional `for` or `while` loop is the best approach for iterating over an array, especially if performance matters. While `forEach` can be convenient, its performance is slightly lower than the other methods. The `for in` loop should be avoided due to its poor performance and limitations when dealing with sparse or non-numeric indices.

Keep in mind that these results might vary depending on the specific use case, JavaScript engine, and hardware.

Latest run results:

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

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

Browser/OS: Chrome 77 on Windows

View result in a separate tab

Test name	Executions per second
for of	28751.1 Ops/sec
for in	9050.6 Ops/sec
for	17621.0 Ops/sec
while	18495.7 Ops/sec
forEach() with function	27712.8 Ops/sec
forEach() with closure	31470.1 Ops/sec
for, reversed	13056.6 Ops/sec
for, cached length	2666.2 Ops/sec
while, reversed	67979.2 Ops/sec
while, cached length	3160.7 Ops/sec

Related benchmarks:

loops-perf (version: 0)

Comparing performance of: for of vs for in vs for vs while vs forEach() with function vs forEach() with closure vs for, reversed vs for, cached length vs while, reversed vs while, cached length

Created: 4 years ago by: Guest

Jump to the latest result

for of

for in

for

while

forEach() with function

forEach() with closure

for, reversed

for, cached length

while, reversed

while, cached length

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):