Benchmark: Array.prototype.forEach vs _.each vs jquery each vs Array.prototype.map

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Array.prototype.forEach
var params = [ "hello", true, 7 ]; var index = 0; params.forEach(param => index++);
lodash each
var params = [ "hello", true, 7 ]; var index = 0; _.each(params, param => index++);
Jquery each
var params = [ "hello", true, 7 ]; var index = 0; $.each(params, param => index++);
Array.prototype.map
var params = [ "hello", true, 7 ]; var index = 0; params.map(param => index++);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.forEach
lodash each
Jquery each
Array.prototype.map

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case, where four different approaches are compared: `Array.prototype.forEach`, `_lodash.each`, `$jquery.each`, and `Array.prototype.map`. The benchmark tests the performance of these methods on an array with three elements.

**What is being tested?**

The benchmark is testing the execution speed of each method on the specified array. The test case uses a simple example where an index variable is incremented for each element in the array.

**Options compared:**

1. **Array.prototype.forEach**: This method iterates over the array and calls the provided callback function for each element.
2. **_lodash.each**: This method is part of the Lodash library and provides a similar functionality to `Array.prototype.forEach`.
3. **$jquery.each**: This method is part of the jQuery library and is used to iterate over arrays in a similar way to `Array.prototype.forEach`.
4. **Array.prototype.map**: This method creates a new array with the results of applying the provided callback function to each element in the original array.

**Pros and Cons:**

1. **Array.prototype.forEach**:
	* Pros: Simple, widely supported, and part of the ECMAScript standard.
	* Cons: May be slower than other methods due to the overhead of calling `this.push(...)` for each iteration.
2. **_lodash.each**:
	* Pros: Provides a consistent and predictable way of iterating over arrays, especially in older browsers that don't support `Array.prototype.forEach`.
	* Cons: Requires the inclusion of the Lodash library, which may add unnecessary size to the bundle.
3. **$jquery.each**:
	* Pros: Easy to use and provides a familiar interface for developers who are already familiar with jQuery.
	* Cons: Requires the inclusion of the jQuery library, which may not be desirable in all projects.
4. **Array.prototype.map**:
	* Pros: Creates a new array with the transformed elements, eliminating the need to iterate over the original array multiple times.
	* Cons: May be slower than `forEach` due to the overhead of creating and copying arrays.

**Library usage:**

1. `_lodash.each`: Lodash is a popular utility library that provides a wide range of functions for tasks such as string manipulation, object merging, and array iteration. In this case, it's used to provide a consistent way of iterating over arrays.
2. `$jquery.each`: jQuery is a widely-used JavaScript library that provides a lot of functionality for DOM manipulation and event handling. In this case, it's used to provide an easy-to-use interface for iterating over arrays.

**Special JS features or syntax:**

This benchmark doesn't use any special JavaScript features or syntax beyond the standard ECMAScript syntax.

Latest run results:

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

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

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.forEach	142755136.0 Ops/sec
lodash each	3799826.2 Ops/sec
Jquery each	3135630.0 Ops/sec
Array.prototype.map	10873613.0 Ops/sec

Related benchmarks:

Array.prototype.forEach vs _.each vs jquery each vs Array.prototype.map (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: Array.prototype.forEach vs lodash each vs Jquery each vs Array.prototype.map

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.forEach

lodash each

Jquery each

Array.prototype.map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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