Benchmark: loops-forin-forof-native-4

Script Preparation code:

var arr = [];
const randomizeArray = () => {
	for	(let i = 0; i < 50000; i++) {
		arr[i] = Math.floor(Math.random() * 100000);
	}
}

randomizeArray();

Tests:

for-in
let dummy = 0; for (let j = 0; j < 100; j++){ for (let i in arr) { dummy += i; } }
for-of
let dummy = 0; for (let j = 0; j < 100; j++){ for (let i of arr) { dummy += i; } }
native
let dummy = 0; for (let j = 0; j < 100; j++){ for (let i = 0; i < arr.length; i++) { dummy += arr[i]; } }
native - cache lengh
let dummy = 0; for (let j = 0; j < 100; j++){ let length = arr.length; for (let i = 0; i < length; i++) { dummy += arr[i]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-in
for-of
native
native - cache lengh

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for-in	4.4 Ops/sec
for-of	287.0 Ops/sec
native	94.5 Ops/sec
native - cache lengh	183.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of three different ways to iterate over an array in JavaScript: `for-in`, `for-of`, and native (using the `Array.prototype.forEach()` method). The test case is as follows:

* Create a large array (`arr`) with random values.
* Use three different loops to iterate over the array:
	+ `for-in`: uses the `in` operator to get the indices of the array elements.
	+ `for-of`: uses the `of` keyword to get the elements of the array.
	+ Native: uses the `Array.prototype.forEach()` method.

**Comparison Options**

The three options are compared in terms of execution time, which is measured as "ExecutionsPerSecond". This metric represents how many iterations of the loop can be completed per second on a specific device.

**Pros and Cons of Each Approach**

1. **`for-in`**:
	* Pros: Simple to implement, no additional dependencies required.
	* Cons: Can lead to slow performance due to the use of `in` operator, which may trigger unnecessary comparisons or method calls (e.g., when checking for property existence).
2. **`for-of`**:
	* Pros: Modern and efficient way to iterate over arrays, with good cache locality.
	* Cons: Requires modern JavaScript environments (ECMAScript 2015+), and the `of` keyword may not be familiar to all developers.
3. **Native (`Array.prototype.forEach()`)**:
	* Pros: Optimized for performance, uses caching mechanisms to improve iteration speed.
	* Cons: Requires additional dependencies (the `Array.prototype.forEach()` method), which can add complexity.

**Other Considerations**

* **Cache locality**: The `for-of` approach has good cache locality due to the way it accesses elements in contiguous memory locations. This can lead to faster performance, as the CPU can execute multiple iterations of the loop together.
* **Browser support**: The `for-in` and `for-of` approaches may not work in older JavaScript environments or browsers that don't support modern iteration syntax.

**Alternative Approaches**

Other alternatives for iterating over arrays include:

1. Using traditional `for` loops with indices (`arr[i] = 0; while (i < arr.length) { ... }`)
2. Using array methods like `map()`, `filter()`, or `reduce()` to transform the array.
3. Using library functions, like Lodash's `map` and `forEach` functions.

In this specific benchmark, the native (`Array.prototype.forEach()`) approach is expected to perform well due to its optimized implementation and caching mechanisms. However, the actual performance results may vary depending on the device, browser, and JavaScript environment used.

Related benchmarks:

loops-forin-forof-native-4 (version: 3)

Comparing performance of: for-in vs for-of vs native vs native - cache lengh

Created: 7 years ago by: Registered User

Jump to the latest result

for-in

for-of

native

native - cache lengh

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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