Benchmark: lodash.each vs Array.forEach vs jQuery.each vs for - inline code

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

Script Preparation code:

var array = new Array(1000)
var sum
for (let i = 0, l = array.length; i < l; ++i) array[i] = i

Tests:

lodash.each
sum = 0 _.forEach(array, function (item) { sum += item * 2 })
native
sum = 0 array.forEach(function (item) { sum += item * 2 })
for loop
sum = 0 for(let i = 0, l = array.length; i < l; ++i) sum += array[i] * 2
jQuery each
sum = 0 $.each(array, function (item) { sum += item * 2 })
for..of loop
sum = 0 for (const item of array) sum += item * 2

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash.each
native
for loop
jQuery each
for..of loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36

Browser/OS: Chrome 98 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash.each	6699.4 Ops/sec
native	6707.6 Ops/sec
for loop	4868.0 Ops/sec
jQuery each	6220.4 Ops/sec
for..of loop	7062.2 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 provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares four different approaches to iterate over an array in JavaScript: `lodash.each`, `Array.prototype.forEach`, `jQuery.each`, and `for` loops (with both traditional syntax and the new `for..of` loop). The focus is on measuring the performance of inline statements within the loop body.

**Options Compared**

1. **_lodash.each**: Uses Lodash's `each` function to iterate over the array.
2. **native`: Uses the built-in `Array.prototype.forEach` method, which is a native JavaScript implementation.
3. **jQuery each**: Uses jQuery's `$.each` function to iterate over the array.
4. **for loop** (traditional): Uses a traditional `for` loop with an index variable (`i`) to iterate over the array.
5. **for..of loop**: Uses the new `for..of` loop syntax, which is designed for iterating over arrays and other iterable objects.

**Pros and Cons of Each Approach**

1. **_lodash.each_**:
	* Pros: Convenient and concise, as it's a single function call.
	* Cons: Adds external dependency (Lodash), and might incur overhead due to its abstraction layer.
2. **native (`Array.prototype.forEach`)**:
	* Pros: Built-in, no additional dependencies, and optimized for performance.
	* Cons: Might require more boilerplate code compared to other options.
3. **jQuery each**:
	* Pros: Convenient and concise, as it's a single function call.
	* Cons: Adds external dependency (jQuery), which might be overkill for this specific use case.
4. **for loop (traditional)**:
	* Pros: Easy to understand and implement, no external dependencies.
	* Cons: Might be slower due to the overhead of manual index management.
5. **for..of loop**:
	* Pros: Concise, readable, and efficient, as it's designed for iterating over arrays.
	* Cons: Newer syntax, which might not be familiar to all developers.

**Other Considerations**

* The benchmark focuses on inline statements within the loop body, so any performance differences due to optimization techniques (e.g., caching or memoization) are likely to be negligible.
* The use of external libraries like Lodash and jQuery adds overhead, but also provides convenience and a familiar API for developers.

**Other Alternatives**

If you're looking for alternatives to the `for..of` loop, you could consider:

* **Array.prototype.reduce()**: While not designed for simple iteration, `reduce()` can be used with an initial value and a callback function to achieve similar results.
* **Map() or Set()**: These data structures provide efficient iteration mechanisms, but might require more memory allocation and deallocation compared to arrays.

Keep in mind that the performance differences between these alternatives are likely to be small, and the choice of iteration method should depend on factors like code readability, maintainability, and personal preference.

Related benchmarks:

lodash.each vs Array.forEach vs jQuery.each vs for - inline code (version: 0)

Compares lodash.each, Array.prototype.forEach, jQuery.each, for and for..of, when the loop body execites an inline statement.

Comparing performance of: lodash.each vs native vs for loop vs jQuery each vs for..of loop

Created: 4 years ago by: Registered User

Jump to the latest result

lodash.each

native

for loop

jQuery each

for..of loop

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