Object and its internal representation in javascript

Objects in JavaScript are very much similar to the objects in real-life. We can see a lot of Objects around us in this real world, each with its own set of properties. For instance let us take a table in the real world, it has its own properties like height, width, and length etc. Similarly all the Objects in the JavaScript are associated with its own set of properties.

Consider this above example containing the list of most expensive parts of the Tesla model. This can be represented in an Object in JavaScript as below:

var mostExpensiveInterior = {
    'name' :'Tesla Model S',
    'sunroof' : 4500,
    'roof' : 3799,
    'radiatorsupport' : 2099.99,
    'frontbumperassembly' : 1649.99,
    'hood' : 1299.99,
    'quarterpanel' : 999
}
                            ex - 1

We can see that there are all the properties in the image being added to the Object “mostExpensiveInterior”. The properties are provided as key value pairs in JavaScript. Here “name” is one of the keys and “Tesla Model S” is its value. It is important to note that all of these are Case-Sensitive in JavaScript. An Object can have a number of data types inside it as values. It can have numbers, string, arrays and even another Object inside it.

This above example is a static version of the Object. Let us say if we need to create objects with similar properties for other Car models as well. Do we need to type all of these again…Well there is a way to reuse an Object Structure in the JavaScript and it can be represented as below.

function MostExpensiveInterior(name,sroof,rf,radsup,fbumpasm,hd,quap) 
{
this.name = name;
this.sunroof = sroof;
this.roof = rf;
this.radiatorsupport = radsup;
this.frontbumperassembly = fbumpasm;
this.hood = hd;
this.quarterpanel = quap;
}var teslaS = new mostExpensiveInterior('Tesla Model S',4500,3799,2099.99,1649.99,1299.99,999)                              ex - 2

Here this “teslaS” is an Object created from another reusable object(Constructor is a function that is used to initialize objects)“MostExpensiveInterior” with all the properties required. Similarly we can create a number of objects with similar properties.

There is also a case where we want to add new property like color to the Objects. This in case of Objects which are already defined like in “ ex — 1” is as follows:

mostExpensiveInterior.color = "white";

This will become difficult in case there are a large number of Objects to which this property is to be added. Whereas if we consider Constructors like in “ ex - 2”, it can be given as :

MostExpensiveInterior.prototype.color = "white";

This will make the color property available to all the Objects created from the Constructor “MostExpensiveInterior”. Note that the “prototype” assigns the property as an internal property of the Object. For example after assigning this color property, if we print the “teslaS” in “ ex - 2”. it will print

console.log(teslas);MostExpensiveInterior {
  name: 'Tesla Model S',
  sunroof: 4500,
  roof: 3799,
  radiatorsupport: 2099.99,
  frontbumperassembly: 1649.99,
  hood: 1299.99,
  quarterpanel: 999
}

(Note : Do not confuse seeing “MostExpensiveInterior” in the print. As “teslaS” is created using “MostExpensiveInterior” it is also displayed. But the properties of this “teslaS” should and can be accessed only as “teslaS.name”and not as “MostExpensiveInterior.name")

You cannot see the color property being available in “teslaS”. This is because the “prototype” assigns the color as an internal property of “MostExpensiveInterior” which is inherited in all the Objects created from it. Not to confuse you… this color property in “teslaS” is there but is not there… 😂😂. You can access it using “teslaS.color” and it will print “white”. but if you print “teslaS” you won’t see the color property.

Arrays, functions are also Objects in JavaScript. Even a prototype is an Object. As I said earlier, Objects can be associated with other Objects in JavaScript. Just like the prototype being associated with the Constructors and even in Arrays. If you provide a property to Array as a prototype it will be associated with all the Arrays.