Benchmark: JQuery each vs for ... of for array

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

Script Preparation code:

var array = [];
var i = 0;
while (i < 1000) {
  array.push(i++);
}

Tests:

$.each
$.each(array, function (i, element) { console.log(element); });
for...of
for (let element of array) { console.log(element); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$.each
for...of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36

Browser/OS: Chrome 84 on Windows

View result in a separate tab

Test name	Executions per second
$.each	12.0 Ops/sec
for...of	11.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases.

**Benchmark Definition:**

MeasureThat.net is testing which approach is faster for iterating over an array with 100 elements. The two approaches being tested are:

1. Using jQuery's `$.each` method.
2. Using a traditional `for` loop with a `for...of` loop (a newer syntax introduced in ECMAScript 2017).

**Options Compared:**

The benchmark is comparing the execution speed of these two approaches.

**Pros and Cons:**

* **`.each` method:** This approach has been around for longer and is still widely used. It's easy to read and maintain, but can be slower than traditional `for` loops due to its overhead.
	+ Pros: Easy to understand, widely supported.
	+ Cons: Slower than traditional `for` loops.
* **Traditional `for...of` loop:** This approach is newer and has gained popularity in recent years. It's more efficient than the `.each` method, but can be less intuitive for some developers.
	+ Pros: Faster execution speed, modern syntax.
	+ Cons: Less familiar to older developers.

**Library and Syntax Features:**

* **$.each**: This is a jQuery method that allows iterating over arrays using a callback function. It's used in the first test case.
* **For...of loop:** This is a newer syntax introduced in ECMAScript 2017, which replaces traditional `for` loops with a more concise and readable way of iterating over arrays or other iterable objects.

**Other Considerations:**

When choosing between these approaches, consider the trade-off between readability and performance. If you're working on a project where performance is critical, the `for...of` loop might be a better choice. However, if readability is more important than speed, the `.each` method might still be a good option.

**Other Alternatives:**

If you're interested in exploring other approaches, here are some alternatives:

* **Array.prototype.forEach()**: Similar to jQuery's `$.each`, but part of the standard JavaScript API.
* **While loops with array indices:** Another traditional approach to iterating over arrays using an index variable.
* **Reduce() and map() methods:** While not specifically designed for iteration, these methods can be used to process arrays in a functional programming style.

Keep in mind that these alternatives might have different performance characteristics than the `.each` method or `for...of` loop.

Related benchmarks:

JQuery each vs for ... of for array (version: 0)

compare which solution is better for array with 100 element

Comparing performance of: $.each vs for...of

Created: 4 years ago by: Guest

Jump to the latest result

$.each

for...of

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