Benchmark: lodash vs for-of vs forEach es6

lodash vs for-of vs forEach es6 (version: 0)

Comparing performance of: lodash.each vs native for-of w/ entries vs native forEach w/ entries vs vanilla for-loop w/ Object.keys vs vanilla for-loop w/ Object.entries vs vanilla for-loop w/ Object.values (no keys) vs native forEach w/ Object.values (no keys) vs native for-in vs native for-in es6

Created: 6 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

Script Preparation code:

var obj = Array.from({ length: 10000 }).map((value, i) => i).reduce((val, v) => { val[v] = v; return val; }, {})

Tests:

lodash.each
_.each(obj, function(v,k) {})
native for-of w/ entries
for (const [k, v] of Object.entries(obj)) {}
native forEach w/ entries
Object.entries(obj).forEach(function(v, k) {})
vanilla for-loop w/ Object.keys
const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { const v = obj[keys[i]]; }
vanilla for-loop w/ Object.entries
const entries = Object.entries(obj); for (let i = 0; i < entries.length; i++) { const [k, v] = entries[i]; }
vanilla for-loop w/ Object.values (no keys)
const values = Object.values(obj); for (let i = 0; i < values.length; i++){ }
native forEach w/ Object.values (no keys)
Object.values(obj).forEach(function(v) {})
native for-in
for (const prop in obj) { if (obj.hasOwnProperty(prop)) { const v = obj[prop]; } }
native for-in es6
for (const prop in obj) { if (prop in obj) { const v = obj[prop]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash.each
native for-of w/ entries
native forEach w/ entries
vanilla for-loop w/ Object.keys
vanilla for-loop w/ Object.entries
vanilla for-loop w/ Object.values (no keys)
native forEach w/ Object.values (no keys)
native for-in
native for-in es6

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 141 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
lodash.each	13466.5 Ops/sec
native for-of w/ entries	6765.7 Ops/sec
native forEach w/ entries	7017.8 Ops/sec
vanilla for-loop w/ Object.keys	18465.3 Ops/sec
vanilla for-loop w/ Object.entries	7224.4 Ops/sec
vanilla for-loop w/ Object.values (no keys)	67981.5 Ops/sec
native forEach w/ Object.values (no keys)	33275.4 Ops/sec
native for-in	1485.7 Ops/sec
native for-in es6	1493.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of four different approaches to iterate over an object in JavaScript:

1. `lodash.each`
2. Native `for-of` with `Object.entries`
3. Native `forEach` with `Object.entries`
4. Vanilla for-loop with `Object.keys`

These approaches are compared on a 10,000-element array created using the provided script preparation code.

**Library: Lodash**

`lodash` is a popular JavaScript library that provides a set of utility functions for various tasks. In this benchmark, `_.each` is used to iterate over an object. Lodash's `each` function takes two arguments: the object and a callback function that receives the value and key as arguments.

**Native Features**

The benchmark also uses native features in JavaScript:

* `for-of` loop with `Object.entries`: This syntax was introduced in ECMAScript 2015 (ES6) and allows iterating over arrays and objects using a single loop.
* Native `forEach` with `Object.entries`: Similar to the above, but uses the `forEach` method on an array or object created from `Object.entries`.
* Vanilla for-loop with `Object.keys`: This is a traditional for-loop that uses the `Object.keys()` method to get an array of object property names.

**Approach Comparison**

Here's a brief summary of each approach:

1. **Lodash (`_.each`)**: Lodash provides a convenient way to iterate over objects using its `each` function. This approach is likely to be slow because it involves creating a closure and executing the callback function for each element.
2. **Native `for-of` with `Object.entries`**: This approach takes advantage of the modern JavaScript features introduced in ES6. It's likely to be fast because it uses native code under the hood, which is optimized for performance.
3. **Native `forEach` with `Object.entries`**: Similar to the above, but uses the `forEach` method instead of a traditional loop.
4. **Vanilla for-loop with `Object.keys`**: This approach is traditional and may be slower than the native features due to overhead from using built-in functions.

**Performance Results**

The benchmark shows that the native features (`for-of` and `forEach`) outperform Lodash's `_.each` by a significant margin. The vanilla for-loop is also slower, likely due to the overhead of using built-in functions like `Object.keys`.

In summary, if you need to iterate over an object in JavaScript, use the native `for-of` or `forEach` approaches with `Object.entries`. These are designed to be fast and efficient, taking advantage of modern JavaScript features.

Related benchmarks: