For-In vs Object.keys forEach Without Inherited Properties in JavaScript

inheritancejavascript

I was looking at a perf benchmark of Object.keys + forEach vs for-in with normal objects.

This benchmark shows that Object.keys + forEach is 62% slower than the for-in approach. But what if you don't want to get the inherited properties? for-in includes all non-native inherited objects, so we'll have to use hasOwnProperty to check.

I tried to make another benchmark here doing exactly that. But now the for-in approach is 41% slower than Object.keys + forEach.

update

The above test was done in Chrome. Tested it again but with Safari and I'm getting different results: Object.keys(..).forEach(..) 34% slower, odd.

Note: The reason I'm benchmarking is to check how it is with Node.js.

Questions:

Are the jsperf result for Chrome considerable for Node.js?
What happened, how come a single conditional made the for-in approach 41% slower than Object.keys + forEach in Chrome?

Best Answer

node.js uses V8, although I guess it's not the same as the current version in Chrome, but I guess it's a good indicator of node's performances on the subject.

Secondarily, you're using forEach, which is quite handy when developing but adds a callback for every iteration, and that's a (relatively) lenghty task. So, if you're interested in performances, why don't you just use a normal for loop?

for (var i = 0, keys = Object.keys(object); i < keys.length; i++) {
    // ...
}

This yields the best performances you can get, solving your speed problems in Safari too.

In short: it's not the conditional, it's the call to hasOwnProperty that makes a difference. You're doing a function call at every iteration, so that's why for...in becomes slower.

Related Solutions

JavaScript Object.keys() – Why Are Object.keys() and for … in Different?

for-in loops over the object's own enumerable properties and the enumerable properties of its prototype (and its prototype, etc.). Object.keys only lists the object's own enumerable properties.

So Object.keys builds an array something like this:

var keys = [];
var key;
for (key in object) {
    if (object.hasOwnProperty(key)) { // But using an internal, non-overrideable
                                      // operation, not literally the method
        keys.push(key);
    }
}

Note the hasOwnProperty check (it's not really a call to the method, it's an internal check that can't be tricked by replacing the method or similar).

JavaScript – Using for..in vs for..of for Object Keys

There is a slight difference between looping though the Object.keys array and looping using a for...in statement, which in the majority of cases would not be noted. Object.keys(obj) returns only an array with the own properties of the object, while the for...in returns also the keys found in the prototype chain, in order the latter to be done extra check to the prototype of the obj is needed and then to the prototype of the prototype and so on and so forth, until the whole prototype chain has been visited. This certainly makes the second approach less efficient than the first, but as I have already mentioned, this difference would be hardly noticed in the majority of cases.

For a more formal approach, as it is stated in the MDN:

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

Best Answer

Related Solutions

JavaScript Object.keys() – Why Are Object.keys() and for … in Different?

JavaScript – Using for..in vs for..of for Object Keys

Related Question