Benchmark: forEach vs for vs Query each vs for of

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">

Tests:

forEach (Native)
var linkEls = document.querySelectorAll('link[href*=".min.css"]'); [].forEach.call(linkEls,function(el){ console.log(el); });
for (Native)
var linkEls = document.querySelectorAll('link[href*=".min.css"]'); for(var i = 0; i < linkEls.length; i++) { var el = linkEls[i]; console.log(el); }
each (jQuery)
$('link[href*=".min.css"]').each(function(){ console.log(this); });
For of (ES6)
let linkEls = document.querySelectorAll('link[href*=".min.css"]'); for (var el of linkEls) { console.log(el); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach (Native)
for (Native)
each (jQuery)
For of (ES6)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 109 on Linux

View result in a separate tab

Test name	Executions per second
forEach (Native)	16530.7 Ops/sec
for (Native)	16961.1 Ops/sec
each (jQuery)	2632.5 Ops/sec
For of (ES6)	3086.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark defines four test cases:

1. `forEach (Native)`: Uses the native `forEach` method to iterate over an array.
2. `for (Native)`: Uses a traditional `for` loop to iterate over an array.
3. `each (jQuery)`: Uses jQuery's `each` method to iterate over an array.
4. `For of (ES6)`: Uses the newer `for...of` loop syntax to iterate over an array.

**What is tested**

In this benchmark, we're measuring the execution performance of each iteration method. The test case generates an array of link elements using `document.querySelectorAll`, and then iterates over it, logging each element to the console.

**Options compared**

The benchmark compares the following options:

* Native `forEach` method
* Traditional `for` loop
* jQuery's `each` method
* Newer `for...of` loop syntax (ES6)

**Pros and Cons of each approach**

1. **Native `forEach` method**:
	* Pros: Fast, efficient, and widely supported.
	* Cons: May not be as intuitive for developers unfamiliar with it.
2. **Traditional `for` loop**:
	* Pros: Easy to understand and implement, especially for older JavaScript versions.
	* Cons: Can be slower than native `forEach`, especially for large datasets.
3. **jQuery's `each` method**:
	* Pros: Convenient for developers familiar with jQuery, easy to use.
	* Cons: May add extra overhead due to the library itself, not always necessary.
4. **Newer `for...of` loop syntax (ES6)**:
	* Pros: Modern, efficient, and easier to read for new code.
	* Cons: May not be supported in older JavaScript versions or environments.

**Library usage**

The benchmark uses jQuery's `each` method, which is a convenient but potentially overkill solution. While the test case only requires iterating over an array of link elements, using jQuery introduces additional overhead and may not be necessary for this specific use case.

**Special JS feature/syntax**

There are no special JavaScript features or syntaxes used in this benchmark that require explanation.

**Other alternatives**

If you wanted to try alternative iteration methods, here are a few options:

* `map` function: Instead of iterating over an array, you could use the `map` function to create a new array with transformed elements.
* `reduce` function: You could also use the `reduce` function to iterate over an array and accumulate values in an accumulator.

In conclusion, this benchmark provides a useful comparison of different iteration methods in JavaScript. By choosing the right approach for your specific use case, you can optimize performance and write more efficient code.

Related benchmarks:

forEach vs for vs Query each vs for of (version: 0)

with <link>

Comparing performance of: forEach (Native) vs for (Native) vs each (jQuery) vs For of (ES6)

Created: 8 years ago by: Registered User

Jump to the latest result

forEach (Native)

for (Native)

each (jQuery)

For of (ES6)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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