Benchmark: array iteration vs _.each vs map vs for..of vs for loop

HTML Preparation code:

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

Script Preparation code:

var array = ['a', 'b', 'c']

Tests:

_.each
_.each(array, (value, index) => { console.log(value) })
forEach
array.forEach((value, index) => { console.log(value) })
map
array.map((value, index) => { console.log(value) })
for..of
for (const value of array) { console.log(value) }
for loop
for (let i = 0; i < array.length; i++) { console.log(array[i]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.each
forEach
map
for..of
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Windows

View result in a separate tab

Test name	Executions per second
_.each	36419.1 Ops/sec
forEach	39760.5 Ops/sec
map	36694.3 Ops/sec
for..of	36984.0 Ops/sec
for loop	36807.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare the performance of six different ways to iterate over an array:

1. `_.each` from the Lodash library
2. `array.forEach`
3. `array.map`
4. `for..of` loop
5. traditional `for` loop

**Script Preparation Code and Html Preparation Code**

The script preparation code creates a sample array `array = ['a', 'b', 'c']`. The HTML preparation code includes the Lodash library (`lodash.core.js`) from a CDN.

**Test Cases**

Each test case represents one of the six iteration methods:

1. `_.each`
2. `forEach`
3. `map`
4. `for..of`
5. traditional `for` loop
6. `array.forEach`

**What's being tested?**

The benchmark is testing the performance of each iteration method on a sample array. The goal is to determine which method is the fastest and most efficient.

**Options Compared**

Here's a brief overview of each option:

1. **_.each**: A utility function from Lodash that iterates over an array, executing a callback function for each element.
	* Pros: Convenient and easy to use, especially when working with nested data structures.
	* Cons: May have overhead due to the need for a callback function.
2. **forEach**: A built-in method of arrays in JavaScript that iterates over an array, executing a callback function for each element.
	* Pros: Fast and efficient, as it's implemented in native code.
	* Cons: Limited to iterating over arrays; no support for nested data structures.
3. **map**: A built-in method of arrays in JavaScript that creates a new array with the results of applying a given function to every element in the original array.
	* Pros: Can be used for both iteration and transformation, making it a versatile option.
	* Cons: May have overhead due to the need to create a new array.
4. **for..of**: A modern JavaScript loop that iterates over arrays using a `for` loop syntax.
	* Pros: Fast and efficient, as well as easy to read and write.
	* Cons: Only available in modern browsers and environments (e.g., Node.js).
5. traditional `for` loop: A classic loop construct that iterates over an array using an index variable.
	* Pros: Fast and efficient, with minimal overhead.
	* Cons: Can be verbose and difficult to read, especially for complex logic.

**Pros and Cons**

Here's a summary of the pros and cons of each option:

| Option | Pros | Cons |
| --- | --- | --- |
| _.each | Convenient, easy to use (nested data structures) | Overhead due to callback function |
| forEach | Fast, efficient | Limited to iterating over arrays |
| map | Versatile (iteration and transformation), fast | Overhead due to array creation |
| for..of | Fast, efficient, modern syntax | Only available in modern browsers/Node.js |
| traditional `for` loop | Fast, efficient, minimal overhead | Verbose, difficult to read |

**Other Considerations**

* Lodash's `_.each` is a convenient option for working with nested data structures, but may have performance implications due to the callback function.
* `forEach` and `map` can be used for both iteration and transformation, making them more versatile than traditional loops.
* `for..of` is a modern and efficient loop construct, but its availability depends on the browser or environment.

**Alternatives**

Other alternatives to these options include:

* Using `filter()`, `reduce()`, and other array methods in combination with `forEach` or `map`
* Implementing custom iteration logic using recursion or generators
* Using third-party libraries like underscore.js (Lodash's alternative) or other polyfills

These are just a few examples, and the best approach will depend on the specific requirements of your project.

Related benchmarks:

array iteration vs _.each vs map vs for..of vs for loop (version: 0)

Comparing performance of: _.each vs forEach vs map vs for..of vs for loop

Created: 4 years ago by: Registered User

Jump to the latest result

_.each

forEach

map

for..of

for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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