Benchmark: array iteration vs _.each vs map 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 loop
for (var x = 0; x < array.length; ++x){ console.log(array[x]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.each
forEach
map
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.each	150966.6 Ops/sec
forEach	131113.2 Ops/sec
map	170841.3 Ops/sec
for loop	155585.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is tested in the provided JSON.

The benchmark measures the performance of different approaches to iterate over an array:

1. `_each` (using Lodash)
2. `forEach` (native JavaScript method)
3. `map`
4. `for loop`

Here are some pros and cons for each approach:

* **_each_ (Lodash)**: This method is useful when you need to perform a side effect or modify the original array. However, it has a slight overhead due to its functional programming nature.
* **forEach**: This native JavaScript method is often considered the most lightweight option. It's easy to read and maintain, but some people find it less expressive than other approaches.
* **map**: This method creates a new array with transformed elements. While it can be efficient for certain use cases, it might not be suitable when you need to iterate over the original array or perform side effects.
* **for loop**: This traditional approach is often considered the most straightforward and least overhead option. However, it requires manual indexing and can lead to more verbose code.

Other considerations:

* The use of `console.log` statements for logging values might introduce some overhead due to the console's performance characteristics.
* The benchmark doesn't account for potential variations in array initialization, resizing, or other external factors that might affect performance.

Regarding special JS features or syntax, this benchmark doesn't explicitly test any advanced topics like async/await, Promises, or modern ES modules. However, it does use Lodash, a popular utility library, which is widely adopted but not essential for basic array iteration.

As for alternatives, other ways to iterate over an array in JavaScript include:

* Using `Array.prototype.reduce()` or `Array.prototype.every()`
* Utilizing the `every()` method with a callback function
* Implementing a custom iterator using a generator function or a recursive approach

Keep in mind that this benchmark focuses on simple iteration, and more complex scenarios might require different approaches.

In general, understanding the performance characteristics of these methods will help developers make informed decisions when working with arrays and optimizing their code.

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

_.each

forEach

map

for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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