Benchmark: $.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 idAndNames = ['1', 'Serge', '2', 'Alex', '3', 'Mary', '4', 'Sasha', '5', 'Max'];

Tests:

$.each
$.each(idAndNames, function (index, value) { console.log("value:" + value);});
for .. of
for (const value of idAndNames) {console.log("value:" + value);}

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; rv:78.0) Gecko/20100101 Firefox/78.0

Browser/OS: Firefox 78 on Windows

View result in a separate tab

Test name	Executions per second
$.each	2153.9 Ops/sec
for .. of	2236.6 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.

The provided JSON represents a benchmark test that compares two approaches to iterating over an array: `.each()` from jQuery and `for...of` loop. We'll break down each aspect, exploring what's being tested, the pros and cons of each approach, and other considerations.

**Script Preparation Code**
```javascript
var idAndNames = ['1', 'Serge', '2', 'Alex', '3', 'Mary', '4', 'Sasha', '5', 'Max'];
```
The script prepares an array `idAndNames` containing 9 elements. This array will be used as the test data for both benchmarking approaches.

**Html Preparation Code**
```html
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
```
This code snippet includes jQuery library version 3.4.1 from a CDN, which is used in one of the benchmarking approaches (`$.each()`).

**Benchmark Definition**
The benchmark definition specifies two test cases:

1. `$.each(idAndNames, function (index, value) { console.log("value:" + value); });`
2. `for (const value of idAndNames) {console.log("value:" + value);}`

These test cases iterate over the `idAndNames` array using two different methods:

**`.each()`**
This method uses jQuery's `.each()` function, which calls a provided callback function for each element in the array. The callback function receives two arguments: `index` (the current index of the iteration) and `value` (the value at that index).

Pros:

* Easy to use and well-known API
* Can be used with other jQuery methods

Cons:

* Requires an additional library (jQuery)
* Performance might be slower due to overhead from the library

**for...of**
This method uses a `for...of` loop, which is a more modern way of iterating over arrays in JavaScript. The loop iterates over the array elements directly, without needing an explicit index.

Pros:

* Lightweight and efficient
* No additional library required
* Modern and widely supported

Cons:

* Might be less familiar to developers who haven't used it before
* Doesn't support older browsers or environments

**Library: jQuery**
In one of the test cases (`$.each()`), jQuery is included as a library. jQuery provides a range of useful functions for working with HTML documents, including DOM manipulation and event handling.

Pros:

* Provides a comprehensive set of features for web development
* Wide adoption and support in the browser market

Cons:

* Adds extra weight to your application due to its size and complexity
* Can be overkill for simple tasks or projects

**Special JS Feature/Syntax: For...of Loop**
The `for...of` loop is a modern JavaScript feature that was introduced with ECMAScript 2015 (ES6). It allows you to iterate over arrays, objects, or other iterable data structures in a more concise and expressive way.

Pros:

* More readable and maintainable code
* Easier to use than traditional `for...in` loops

Cons:

* Requires modern JavaScript versions to be supported
* May not work in older browsers or environments

**Other Alternatives**
For benchmarking arrays, you can also consider using other approaches like:

1. Using a `forEach()` loop directly on the array.
2. Implementing your own custom iterator function.

However, for this specific test case, the two methods being compared (`$.each()` and `for...of`) are sufficient, as they represent common use cases in web development.

**Benchmark Results**
The provided benchmark results show the execution per second for both test cases:

1. `for...of`: 2236.587158203125 executions/second
2. `$.each`: 2153.891357421875 executions/second

These results indicate that, on this particular setup, the `for...of` loop is slightly faster than the `.each()` method.

Keep in mind that these results are specific to this benchmark test case and might not reflect real-world performance differences for your own projects.

Related benchmarks:

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

compare how to quick work with array in cycle

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