Let's say we have a simple object in JavaScript.
let obj = {a: 1};
console.log(obj.a);
Accessing an object's property have O(1) complexity, i.e. it's super fast. But it's not that simple. If a property is not found, it's searched in the object's prototype. If it's not found again, the process continues until the prototype chain root is reached.
So, the property lookup process might be very time consuming in case of an object with long prototype chain.
Here's an example
function getObjectWithLongPrototypeChain(depth = 1) {
let nextObj = {a: 1};
for (let i = 0; i < depth; i++) {
nextObj = Object.create(nextObj);
}
return nextObj;
}
let regularObject = {a: 1};
let longObject = getObjectWithLongPrototypeChain(1000000);
let t0;
let t1;
t0 = performance.now();
console.log(regularObject.a);
t1 = performance.now();
console.log(`Property lookup in the regular object took ${(t1 - t0)} milliseconds.`);
t0 = performance.now();
console.log(longObject.a);
t1 = performance.now();
console.log(`Property lookup in the object with long prototype chain took ${(t1 - t0)} milliseconds.`);
And the results are
Property lookup in the regular object took 0.21500000730156898 milliseconds.
Property lookup in the object with long prototype chain took 42.249999998603016 milliseconds.
So, the basic operation of property lookup for the second object took an incredible amount of time! While it's almost impossible to have objects with so long prototype chains in production code, I think it's good to know how JS engine resolves property lookup for objects.
Top comments (3)
let Object.prototype.hasOwnProperty() to the rescue
Yeah, thanks for mentioning this method. But using
hasOwnProperty
will console.log different result in the post's example, so use it with caution.It's a great example of How JS works. Of course, nobody uses somethings as this longObject
But it makes sense to remember how it dangerous.