<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
var obj = Array.from({ length: 10000 }).map((value, i) => i).reduce((val, v) => { val[v] = v; return val; }, {})
_.each(obj, function(v, k) {})
_.map(obj, function(v, k) {})
Object.entries(obj).map(function([k, v]) {})
const entries = Object.entries(obj);
for (let i = 0; i < entries.length; i++) { const [k, v] = entries[i]; }
_.forEach(obj, function(v, k) {})
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
lodash.each | |
lodash.map | |
Object.entries.map | |
vanilla for-loop w/ Object.entries | |
lodash.forEach |
Test name | Executions per second |
---|---|
lodash.each | 2677.7 Ops/sec |
lodash.map | 1855.1 Ops/sec |
Object.entries.map | 1001.5 Ops/sec |
vanilla for-loop w/ Object.entries | 1165.9 Ops/sec |
lodash.forEach | 2771.9 Ops/sec |
Let's break down the provided benchmark and its test cases.
Benchmark Definition
The benchmark is testing the performance of different approaches to iterate over an object in JavaScript. The benchmark is comparing four methods:
lodash.each
lodash.map
vanilla for-loop with Object.entries
(using a traditional for loop with Object.entries
)Object.entries.map
Benchmark Preparation Code
The script preparation code creates an array of 10,000 objects and reduces it to create an object with the same properties. The resulting object is then assigned to the obj
variable.
Html Preparation Code
The HTML preparation code includes a script tag that loads the Lodash library (version 4.17.5) from a CDN.
Test Cases
Each test case represents a single benchmarking iteration:
lodash.each
: Calls the each
method on the obj
object, passing a callback function that takes two arguments: v
and k
.lodash.map
: Calls the map
method on the obj
object, passing a callback function that returns a new value.vanilla for-loop with Object.entries
: Uses a traditional for loop to iterate over the properties of the obj
object using Object.entries
.Object.entries.map
: Calls the map
method on the result of Object.entries(obj)
, passing a callback function that takes two arguments: [k, v]
.Library
Lodash is a popular JavaScript library that provides functional programming utilities. In this benchmark, Lodash is used to provide each
, map
, and other utility functions.
Pros and Cons of Different Approaches
lodash.each
: Pros:lodash.map
: Pros:vanilla for-loop with Object.entries
: Pros:Object.entries.map
: Pros:lodash.each
and map
.
Cons:Special JS Feature/Syntax
There is no special JavaScript feature or syntax used in this benchmark. It relies solely on standard JavaScript features like objects, arrays, loops, and functions.
Other Alternatives
If you don't want to use Lodash or any other library for iteration over objects, you could consider using:
Array.prototype.forEach()
: A built-in method that iterates over an array.for...of
loop: A new syntax for looping over arrays and objects introduced in ECMAScript 2015.Keep in mind that these alternatives may have different performance characteristics compared to the benchmarked methods.