Benchmark: Lodash vs Array vs For Loop iteration

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

const smol = 100000; // 100,000 (100 Thousand)
const meed = 10000000; // 10,000,000 (10 Million)
const beeg = 100000000; // 100,000,000 (100 Million)

var size = smol

var arr2 = [];
for (let ii = 0; ii < size; ii += 1) { arr2.push(ii); }

Tests:

Array.forEach (native)
let twice arr2.forEach(function (el, index) { twice = el * 2; });
lodash _.each
let twice _.each(arr2, function (el, index) { twice = el * 2; });
Array.map (native, discarding result)
let twice arr2.map(function (el, index) { twice = el * 2; });
lodash _.map (discarding result)
let twice _.map(arr2, function (el, index) { twice = el * 2; });
for loop (x of arr)
let twice for (const el of arr2) { twice = el * 2; }
for loop (indexed)
let twice for (let ii = 0; ii < arr2.length; ii += 1) { twice = arr2[ii] * 2; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.forEach (native)
lodash _.each
Array.map (native, discarding result)
lodash _.map (discarding result)
for loop (x of arr)
for loop (indexed)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.forEach (native)	2764.3 Ops/sec
lodash _.each	2753.7 Ops/sec
Array.map (native, discarding result)	1730.6 Ops/sec
lodash _.map (discarding result)	1646.3 Ops/sec
for loop (x of arr)	3546.3 Ops/sec
for loop (indexed)	10140.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, measuring the performance of different approaches for various tasks.

The provided benchmark measures the execution speed of four loops on an array: `Array.forEach (native)`, `lodash _.each`, `Array.map (native, discarding result)`, `lodash _.map (discarding result)`, and `for loop (x of arr)` and `for loop (indexed)`. The test uses a large array of 100,000 elements to simulate a real-world scenario.

**Options Compared**

The benchmark compares the following options:

1. **`Array.forEach (native)`**: This is a built-in JavaScript method that iterates over an array using a callback function.
2. **`lodash _.each`**: This is a utility function from the Lodash library, which provides a way to iterate over an array without modifying its original structure.
3. **`Array.map (native, discarding result)`**: This is another built-in JavaScript method that creates a new array by applying a transformation function to each element of the original array. The `discarding result` part means that the original array is not modified.
4. **`lodash _.map (discarding result)`**: Similar to the previous option, but uses the Lodash library's `_.map` method.
5. **`for loop (x of arr)`**: This is a modern JavaScript syntax that allows iterating over an array using a `for...of` loop.
6. **`for loop (indexed)`**: A traditional JavaScript `for` loop that iterates over an array using an index variable.

**Pros and Cons of Each Approach**

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

1. **`Array.forEach (native)`**:
	* Pros: Easy to use, built-in method.
	* Cons: May not be as efficient for large arrays due to the callback function overhead.
2. **`lodash _.each`**:
	* Pros: Provides a safe way to iterate over an array without modifying its original structure.
	* Cons: Requires importing the Lodash library and using its utility function.
3. **`Array.map (native, discarding result)`**:
	* Pros: Creates a new array without modifying the original one, which can be beneficial for large datasets.
	* Cons: Returns an empty array if the callback function returns `undefined`, which may lead to unexpected behavior.
4. **`lodash _.map (discarding result)`**:
	* Similar pros and cons as the previous option.
5. **`for loop (x of arr)`**:
	* Pros: Modern syntax, easy to read and write, and can be more efficient than traditional loops for large arrays.
	* Cons: May not be supported in older browsers or environments that don't support modern JavaScript features.
6. **`for loop (indexed)`**:
	* Pros: Traditional syntax, widely supported across different browsers and environments.
	* Cons: Can be harder to read and write than modern loops, especially for those familiar with `for...of`.

**Library: Lodash**

Lodash is a popular JavaScript library that provides a set of utility functions for tasks such as array manipulation, object creation, and functional programming. In this benchmark, the `_each` and `_map` methods are used from the Lodash library to demonstrate their performance compared to native JavaScript methods.

**Special JS Feature: For-of Loop**

The `for...of` loop is a modern JavaScript feature that allows iterating over arrays and other iterable objects using a single loop construct. It's widely supported across different browsers and environments, making it a popular choice for modern web development.

Overall, the benchmark provides an objective comparison of the performance of different loops on an array, helping developers understand the trade-offs between various approaches and choose the best one for their specific use case.

Related benchmarks:

Lodash vs Array vs For Loop iteration (version: 1)

Comparing performance of: Array.forEach (native) vs lodash _.each vs Array.map (native, discarding result) vs lodash _.map (discarding result) vs for loop (x of arr) vs for loop (indexed)

Created: 2 years ago by: Registered User

Jump to the latest result

Array.forEach (native)

lodash _.each

Array.map (native, discarding result)

lodash _.map (discarding result)

for loop (x of arr)

for loop (indexed)

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