JavaScript Objects - Property Shadowing

JavaScript Objects - Property Shadowing

2017, Aug 31    

As we all know, JavaScript is prototypical in nature, tho ES2015 inclusion of Classes made it seem somewhat object-oriented to newcomers. It’s not! Classes are just syntactical sugar over JavaScript’s existing prototype-based inheritance. A JavaScript class provides a simpler and clearer syntax to create objects and deal with inheritance that’s all.

JavaScript objects are made up of properties usually called “own properties”. These properties have keys(names) and values associated with them. objects can also have methods when the value of a property is defined as a function. Quite a number of JavaScript developers don’t know that every object has a private property called prototype especially newcomers. A JavaScript prototype holds a link to another object called its prototype. So we can have something like this:

Object ---> [[Prototype]] ---> [[Prototype]] ---> null
// Prototype chain

A prototype object has a prototype of its own and it continues like that until the object reaches a prototype with null, meaning end of the prototype chain.

let x = { m: 5, }; // x ---> Object.prototype ---> null

let y = Object.create(x); // y ---> x ---> Object.prototype --> null
console.log(y.m); // 5 (inherited property)

When trying to access a property of an object, JavaScript will search for the property on the object, the object’s prototype, the object’s prototype prototype and so on till it find the property. If the property is not found it returns an error. Termination of the property search only occurs when the property has been found or it has reached the end of the prototype chain which is null.

Let’s dive right in to the subject!

Property Shadowing

Let’s look at this code:

let x = { a: 10, m: 5, };
let y = Object.create(x);
y.a = 40;
let z = Object.create(y);

From the code above we can say that Object y inherits the properties of Object x and Object z inherits the properties of Object y.

Open your browser console and let’s try something. This can be done by using the inspect element option or developer tools in your browser. This will give a better understanding about prototype inheritance and more importantly the concept of prototype shadowing.

You can either copy the snippet of code above or click on the link below and just run it, then open your browser console to inspect the result using this JS Bin.

After doing this, you will find something similar to this or this exact thing, depending on your browser:


The Prototype chain

From the image above we can see that the main object "z” that we logged into the console, shows the first Object.Prototype it inherited from object "y". The Object.prototype method is simply linking the objects, saying that “Hey!, I inherited the property “a” from the Object.prototype of object "y" and I have already stored the value”. Then it goes down the prototype chain and checks: is the value null ? If yes, end. If not, continue and look for the other properties I was told to inherit.

The Object.prototype method of object "y" is saying I inherited two properties named “a” and “m”. Object z already has a property of “a” which is a newer value. So its just going to say “Hey! Thanks for letting me know. I already have a value for a key with the same name “a”. I wouldn’t be needing the value of property “a”. I would just go ahead and add property “m” to the properties of my object since its my inheritance. Thank again!”.

That’s is Property Shadowing!

You may have never heard of property shadowing, now you have and it might help you in an interview, maybe!

Like it? Share. :)