var obj = new Object()
var keys = (new Array(100000)).fill(0).map((x, i) => { return i + 1 })
keys.forEach((x) => { obj['prop' + x] = x })
let result;
for(let value of Object.values(obj)){
result = value;
}
let result;
Object.keys(obj).forEach(key => result = obj[key]);
let result;
Object.entries(obj).forEach(([key, value]) => result = value);
let result
Object.values(obj).forEach(value => result = value);
let result;
for (var key in obj) {
result = obj[key];
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Object.values for of | |
Object.keys forEach | |
Object.entries forEach | |
Object.values forEach | |
For in |
Test name | Executions per second |
---|---|
Object.values for of | 58.8 Ops/sec |
Object.keys forEach | 67.4 Ops/sec |
Object.entries forEach | 45.1 Ops/sec |
Object.values forEach | 57.3 Ops/sec |
For in | 70.4 Ops/sec |
Let's break down the JavaScript microbenchmark provided by MeasureThat.net.
Benchmark Overview
The benchmark tests four different ways to access properties of an object: For in
, Object.keys.forEach
, Object.values forEach
, and Object.entries forEach
. The test case uses a large object with 100,000 properties (keys) and assigns each key a value. The goal is to find the most efficient way to retrieve one of these values.
Benchmark Definition
The benchmark definition is provided as a JSON object:
{
"Name": "For in vs Object.*.forEach vs Object.values #3",
"Description": null,
"Script Preparation Code": "var obj = new Object()\r\nvar keys = (new Array(100000)).fill(0).map((x, i) => { return i + 1 })\r\nkeys.forEach((x) => { obj['prop' + x] = x })",
"Html Preparation Code": null
}
This code creates an object obj
with 100,000 properties and assigns each property a value. The script preparation code uses Array.prototype.fill()
and Array.prototype.map()
to generate the keys and assign values.
Individual Test Cases
The benchmark consists of four test cases:
for (var key in obj) { result = obj[key]; }
let result; Object.keys(obj).forEach(key => result = obj[key]);
let result; for (let value of Object.values(obj)) { result = value; }
let result; Object.values(obj).forEach(value => result = value);
These test cases use different approaches to access the properties of the object.
Pros and Cons
Here's a brief summary of each approach:
for in
since it avoids the prototype chain iteration.forEach()
method, which may not be supported in older browsers.for...of
loop syntax.for in
since it uses an iterator, but similar to Object.keys.forEach
.Object.keys.forEach
.Other Considerations
The benchmark results show that the fastest approach depends on the browser and device platform.
For in
is slower for Chrome 121 on desktop (Mac OS X).Object.values for of
is significantly faster than the other approaches, but limited by older browsers.Object.entries forEach
is slower due to its higher overhead compared to for...of
.Library and Special JS Features
None.
Alternatives
Other approaches that could be tested include:
Reflect.ownKeys()
or Object.keys()
with a custom iterator.Array.prototype.reduce()
or Array.prototype.every()
instead of forEach()
.Keep in mind that these alternatives might not be supported by older browsers or may have varying performance characteristics depending on the specific implementation.