Benchmark: spread vs for of

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

<div id='testing'></div>

Tests:

For of
const divs = $(document).find('#testing'); for (div of divs) { console.log('hey'); }
Spread
const divs = $(document).find('#testing'); [...divs].forEach(div => console.log('hey'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For of
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
For of	120125.6 Ops/sec
Spread	84772.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and explain what's being tested.

**Benchmark Definition JSON:**

The provided benchmark definition is a JavaScript microbenchmark that tests two different approaches for iterating over an array of HTML elements.

The benchmark definition consists of two individual test cases:

1. "For of"
2. "Spread "

Both test cases share the same input data, which is an array of HTML elements retrieved using jQuery's `find` method.

**What is being tested:**

The benchmark tests the performance difference between two iteration approaches:

1. **"For of"`: This approach uses the `for...of` loop syntax to iterate over the array of HTML elements.
2. **"Spread "`**: This approach uses the spread operator (`[...]`) followed by `forEach` to iterate over the array of HTML elements.

**Options compared:**

The benchmark is comparing two options:

1. **Iteration using `for...of` loop**: This approach is more modern and concise, but its performance may vary depending on the browser and JavaScript engine.
2. **Iteration using spread operator with `forEach`**: This approach is more verbose but has been widely used in the past.

**Pros and Cons:**

Here are some pros and cons of each approach:

1. **"For of"`:
	* Pros: More concise, easier to read, and modern syntax.
	* Cons: May have performance overhead due to the JavaScript engine's complexity.
2. **"Spread "`:
	* Pros: Widely supported, easy to implement, and has been used extensively in the past.
	* Cons: More verbose, less readable, and may not be as efficient as `for...of` loop.

**Library usage:**

The benchmark uses jQuery (a popular JavaScript library for DOM manipulation) to retrieve an array of HTML elements using the `find` method. The jQuery library provides a convenient way to access and manipulate the DOM.

**Special JS feature or syntax:**

There is no special JavaScript feature or syntax being tested in this benchmark. It's a simple iteration performance comparison.

**Other alternatives:**

If you want to test alternative iteration approaches, here are some options:

1. **`forEach` loop**: This approach uses the `forEach` method directly on the array of HTML elements.
2. **`Array.prototype.forEach.call()`**: This approach uses the `forEach` method as a function and calls it on the array of HTML elements using `Array.prototype.forEach.call()`.
3. **`for...in` loop**: This approach uses the `for...in` loop to iterate over the array of HTML elements.
4. **`Array.prototype.map()` with callback function**: This approach uses the `map` method and provides a callback function that iterates over the array of HTML elements.

Feel free to ask if you'd like me to explain any of these alternatives in more detail!

Related benchmarks:

spread vs for of (version: 0)

Comparing performance of: For of vs Spread

Created: 7 years ago by: Guest

Jump to the latest result

For of

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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