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

For of

120K/s

Spread

85K/s

View exact numbers

Test name	Executions per second
✓ For of	120,126 Ops/sec
Spread	84,772 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!

spread vs for of (version: 0)

Comparing performance of: `For of vs Spread`

Created: 7 years ago by: Guest

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

spread vs for of (version: 0)

Comparing performance of: For of vs Spread

Created: 7 years ago by: Guest

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

Related benchmarks

Comparing performance of: `For of vs Spread`