Benchmark: NodeList For vs Foreach1231

Script Preparation code:

var div = document.createElement('div');
for (let i = 0; i < 1000; i++) {
    div.insertAdjacentHTML('beforeend', `<span>span-${i}<span>`);
}

var list = div.querySelectorAll('span');

Tests:

For
for(let i = 0; i < list.length; i++) { list[i].setAttribute('tabindex', '-1'); }
forEach
list.forEach(item =>{ item.setAttribute('tabindex', '-1'); });
for of
for(const elem of list) { elem.setAttribute('tabindex', '-1'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For
forEach
for of

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and what the pros and cons are for each approach.

**Benchmark Overview**

The test case measures the performance of three different ways to iterate over an array in JavaScript: traditional `for` loop, `forEach` method, and `for...of` loop. The benchmark script creates a NodeList with 1000 elements, sets up the HTML structure, and then measures the time it takes to set the `tabindex` attribute on each element using each of these iteration methods.

**Iteration Methods Compared**

1. **Traditional For Loop**
```javascript
for (let i = 0; i < list.length; i++) {
    list[i].setAttribute('tabindex', '-1');
}
```
Pros:

* Wide support across older browsers and JavaScript engines.
* Easy to understand and implement.

Cons:

* Can be less efficient due to the need for explicit indexing.

2. **forEach Method**
```javascript
list.forEach(item => {
    item.setAttribute('tabindex', '-1');
});
```
Pros:

* More concise and expressive than traditional `for` loops.
* Often considered more modern and idiomatic.

Cons:

* May not be supported in older browsers or JavaScript engines.
* Can be less efficient due to the need for a callback function.

3. **For...of Loop**
```javascript
for (const elem of list) {
    elem.setAttribute('tabindex', '-1');
}
```
Pros:

* More concise and expressive than traditional `for` loops.
* Often considered more modern and idiomatic.
* Can be less efficient due to the need for a block scope.

Cons: None notable, but may require careful consideration in older browsers or JavaScript engines.

**Library Used**

None explicitly mentioned. The benchmark script uses native JavaScript features and DOM methods.

**Special JS Features or Syntax**

The `forEach` method is a modern JavaScript feature that was introduced in ECMAScript 2015 (ES6). The `for...of` loop is also a newer feature, introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

For iterating over arrays, other alternatives to these methods include:

* `map()`: Returns an array of values generated by applying a callback function to each element in the original array.
* `reduce()`: Applies a reduction function to each element in the original array and returns a single value.
* Closures or higher-order functions: Can be used to iterate over arrays, but may require more complex implementation.

Keep in mind that the choice of iteration method depends on the specific requirements of your application, such as performance, code readability, and browser support.

Related benchmarks:

NodeList For vs Foreach1231 (version: 0)

Comparing performance of: For vs forEach vs for of

Created: 2 years ago by: Guest

Jump to the latest result

For

forEach

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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