Benchmark: for loops 2024-05-30

HTML Preparation code:

<h1>Test different js loops</h1>

Script Preparation code:

var array = Array.from({ length: 100 }, () => (Math.random() * 1000).toFixed(4));
array.push(1000.0000);

Tests:

warmup
for (let i = 0, len = array.length; i < len; i++) {}
for
let sum1 = 0; for (let i = 0, len = array.length; i < len; i++) { sum1 += parseFloat(array[i]); }
for ... of
let sum2 = 0; for (const num of array) { sum2 += parseFloat(num); }
forEach
let sum3 = 0; array.forEach(num => { sum3 += parseFloat(num); });
map
let sum4 = 0; array.map(num => { sum4 += parseFloat(num); });
reduce
let sum5 = array.reduce((sum, num) => sum + parseFloat(num), 0);
while
let sum6 = 0; let i = 0; while (i < array.length) { sum6 += parseFloat(array[i]); i++; }
some
let sum7 = 0; array.some(num => { sum7 += parseFloat(num); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
warmup
for
for ... of
forEach
map
reduce
while
some

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
warmup	36069444.0 Ops/sec
for	508704.2 Ops/sec
for ... of	512576.6 Ops/sec
forEach	524037.6 Ops/sec
map	494741.1 Ops/sec
reduce	523252.2 Ops/sec
while	524435.4 Ops/sec
some	488919.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript loops is crucial for optimizing code and improving overall application performance.

**Loop types being compared:**

1. **Traditional `for` loop**: This is the most common type of loop in JavaScript. It uses an index variable to iterate over the array elements.
2. **`for...of` loop**: Introduced in ECMAScript 2015 (ES6), this loop allows iterating directly over iterable objects, such as arrays, without using a traditional `for` loop or other methods like `forEach()` or `map()`.
3. **`forEach()` method**: This is a part of the Array prototype and allows iterating over an array by providing a callback function for each element.
4. **`map()` method**: Similar to `forEach()`, but returns a new array with the results of applying the provided function to each element in the original array.
5. **`reduce()` method**: This reduces an iterable object to a single value, which can be useful for calculating sums or performing other aggregate operations.
6. **`while` loop**: A traditional loop that uses a condition to control iteration.

**Pros and Cons of different approaches:**

1. **Traditional `for` loop**:
	* Pros: Simple, easy to understand, and well-supported by most JavaScript engines.
	* Cons: Can lead to verbose code, especially for complex loops.
2. **`for...of` loop**:
	* Pros: More concise and expressive than traditional `for` loops, as it allows iterating directly over iterable objects without needing a separate index variable.
	* Cons: May be slower due to the overhead of resolving the iterator.
3. **`forEach()` method**:
	* Pros: Convenient for simple iteration, especially when working with arrays.
	* Cons: Returns `undefined`, making it less suitable for applications requiring meaningful results from iteration.
4. **`map()` method**:
	* Pros: Returns a new array, allowing for more flexibility and reuse of results.
	* Cons: May be slower than traditional loops or other methods like `forEach()`.
5. **`reduce()` method**:
	* Pros: Useful for aggregate operations, such as calculating sums or performing reductions.
	* Cons: May require additional handling for edge cases (e.g., initial value).
6. **`while` loop**:
	* Pros: Simple and flexible, allowing for manual control over iteration.
	* Cons: Can lead to verbose code and is less convenient than other loop types.

**Observations from the benchmark results:**

1. The `for...of` loop tends to be faster than traditional `for` loops, especially for small arrays.
2. The `forEach()` method is generally slower than traditional loops or other methods like `map()`.
3. The `reduce()` method can be slower due to its overhead and potential need for initial values.
4. The `while` loop tends to perform worse than the other loop types.

**Conclusion:**

The choice of loop type depends on the specific use case, personal preference, and performance requirements. Traditional `for` loops are still a good option when simplicity and readability are prioritized. However, `for...of` loops offer concise and expressive alternatives for iterating over arrays. When aggregate operations or more flexibility are necessary, methods like `map()` and `reduce()` should be considered.

In this specific benchmark, the results suggest that:

* `for...of` loops are generally faster than traditional `for` loops.
* `forEach()` is slower than traditional loops but may be suitable for certain use cases.
* `map()` returns a new array, making it more flexible and reusable than traditional loops.
* `reduce()` can be slow due to its overhead and potential need for initial values.
* The `while` loop tends to perform poorly in this benchmark.

These findings should serve as guidance for optimizing JavaScript code, but keep in mind that the performance impact of different loop types can vary depending on specific use cases, browser versions, and other factors.

Related benchmarks:

for loops 2024-05-30 (version: 0)

Test different loops

Comparing performance of: warmup vs for vs for ... of vs forEach vs map vs reduce vs while vs some

Created: one year ago by: Guest

Jump to the latest result

warmup

for

for ... of

forEach

map

reduce

while

some

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):