Benchmark: NodeList for...of vs [].map.call

HTML Preparation code:

<ul>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
</ul>

Tests:

for...of
const testEls = document.querySelectorAll('.test'); for (const testEl of testEls) { testEl.textContent = 'Tested!'; testEl.classList.add('tested'); }
[].map.call
[].map.call( document.querySelectorAll('.test'), (testEl) => { testEl.textContent = 'Tested!'; testEl.classList.add('tested'); }, );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...of
[].map.call

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 JSON data and explain what is being tested in this JavaScript benchmark.

**Benchmark Overview**

The benchmark compares two approaches for modifying an array of HTML elements: using `for...of` loop with `Array.from()` or `map.call()` on a NodeList.

**Options Compared**

1. **Using `for...of` loop**: This approach uses the new `for...of` loop syntax, which was introduced in ECMAScript 2015. It iterates over an array-like object (in this case, a NodeList) and assigns each element to the loop variable.
2. **Using `[].map.call()` on a NodeList**: This approach uses the `.map()` method on an array (in this case, a NodeList is converted to an array using `Array.from()`) and passes a callback function that modifies each element.

**Pros and Cons of Each Approach**

1. **For...of Loop**
	* Pros:
		+ More readable code, as it explicitly states the intent of iterating over the elements.
		+ Less overhead compared to `.map.call()` since it doesn't involve array creation or copying.
	* Cons:
		+ Not supported in older browsers (pre-ECMAScript 2015).
2. **[].map.call() on a NodeList**
	* Pros:
		+ Widely supported across modern browsers and older ones that support `Array.from()`.
	* Cons:
		+ More complex code, as it involves array creation, copying, and callback function.
		+ Can be slower due to the overhead of creating an array.

**Library Usage**

There is no explicit library usage in this benchmark. However, if you're familiar with JavaScript, you know that `Array.from()` is a method that converts an iterable (like a NodeList) into an array.

**Special JS Features or Syntax**

The benchmark uses the new `for...of` loop syntax, which is a modern feature introduced in ECMAScript 2015. This syntax allows for more readable and concise code when iterating over arrays-like objects.

**Other Alternatives**

If you're looking for alternative approaches to modify an array of HTML elements, consider:

1. Using `.forEach()` method: Similar to the `for...of` loop, but with a callback function that takes three arguments (element, index, array).
2. Using a traditional `for` loop with indexing: More verbose than the other approaches, but still effective.
3. Using modern libraries like Lodash or Ramda for functional programming and more concise code.

In summary, this benchmark compares two popular approaches to modify an array of HTML elements: using `for...of` loop and `[].map.call()` on a NodeList. The `for...of` loop is generally considered more readable and efficient, but might not be supported in older browsers. The `.map.call()` approach is widely supported but can be slower due to the overhead of creating an array.

Related benchmarks:

NodeList for...of vs [].map.call (version: 0)

Comparing performance of: for...of vs [].map.call

Created: 3 years ago by: Guest

Jump to the latest result

for...of

[].map.call

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