Benchmark: while, for, for-of, map

Script Preparation code:

var arr = Array(1_000_000);
for (let i = 0; i < 1_000_000; i++) {
  arr[i] = { num: Math.random() };
}

Tests:

while
var newArr = []; let l = arr.length; let i = -1; while (++i < l) { newArr.push(arr[i].num); }
for
var newArr = []; var l = arr.length; for (var i = 0; i < l; i++) { newArr.push(arr[i].num); }
for-of
var newArr = []; for (var val of arr) { newArr.push(val.num); }
.map
var newArr = arr.map(val => val.num);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while
for
for-of
.map

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark is comparing four different approaches to iterate over an array and extract a specific value:

1. `while`
2. `for`
3. `for-of` (also known as "foreach")
4. `.map`

The test case creates an array of 1 million elements, each containing a random number between 0 and 100.

**Library Used**

In the benchmark code, no external library is used. However, some browsers might use their own libraries or optimized versions of these algorithms under the hood.

**Special JS Features/Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. It's a straightforward example of comparing different iteration techniques.

**Benchmark Test Cases**

Let's analyze each test case:

1. **`while`**: This loop uses an incrementing index (`i`) to iterate over the array, and pushes each value to a new array (`newArr`). The pros of this approach are:
	* Simple and easy to understand.
	* Can be optimized for performance by using an iterator or a buffer.
However, the cons are:
	* Has higher overhead due to the incrementing index calculation.
	* Might not be as efficient as other methods for large arrays.
2. **`for`**: This loop uses a fixed index (`i`) to iterate over the array, and pushes each value to a new array (`newArr`). The pros of this approach are:
	* Can be optimized for performance by using an iterator or a buffer.
	* Less overhead compared to `while`.
However, the cons are:
	* More complex than the `while` loop.
3. **`for-of` (foreach)**: This loop uses a foreach loop to iterate over the array, and pushes each value to a new array (`newArr`). The pros of this approach are:
	* Very concise and easy to understand.
	* Optimized for performance by using the iterator API.
However, the cons are:
	* Less control over iteration compared to `while` and `for`.
4. **`.map()`**: This method uses a callback function to transform each element in the array, and returns a new array with the transformed values. The pros of this approach are:
	* Very concise and easy to understand.
	* Optimized for performance by using the iterator API.
However, the cons are:
	* Might not be suitable for all types of data (e.g., arrays with nested objects).
	* Can be slower than other methods due to the overhead of the callback function.

**Other Alternatives**

Other alternatives to these four approaches include:

1. `Array.prototype.forEach()`: Similar to `for-of`, but without the iteration over the array's length.
2. `Array.prototype.reduce()`: Uses a cumulative reduction operation to accumulate values in an array, which can be more efficient than pushing values to a new array.

**Additional Considerations**

When choosing an iteration technique for performance-critical code:

1. Profile and benchmark your code to determine the optimal approach for specific use cases.
2. Consider using optimized libraries or frameworks that provide built-in support for these algorithms.
3. Use caching, memoization, or other optimization techniques to reduce unnecessary computations.

I hope this explanation helps you understand what's being tested in the benchmark!

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
while	6.0 Ops/sec
for	6.4 Ops/sec
for-of	18.4 Ops/sec
.map	12.0 Ops/sec

Related benchmarks:

while, for, for-of, map (version: 0)

Comparing performance of: while vs for vs for-of vs .map

Created: 7 months ago by: Guest

Jump to the latest result

while

for

for-of

.map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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