Creating our first Superhero Object Literal:
So by executing below the commands we have the following respected outputs:
So, these properties are categorized into 2 different types namely:
These are the characteristics over which Properties of Objects behave. They all are based on internal attributes and one can easily modify them. Let's go into more details and discuss all the attributes one by one. 🙂
Note: These attributes are internal so to represent them, we enclosed each attributes in double square bracket
Data Types: We have values for properties like value Hulk for property name. Data properties contain a single location for these values. A value can be read from or written to this location. It means property like name, weight have a single location, assign to them and value is stored in that location. Data properties have four internal attributes, namely:
If we want to change any of these attribute, then we have to use Object.defineProperty( ) method. This method contains three arguments: one is the name of the object on which we have to perfome some action, the second is the name of the property and a third is descriptor object. A Descriptor object should contain attributes like Enumerable, Configurable, Value, Writable with their respected values. We can set one or all of these values to change the corresponding attribute values. We will see the related examples below. Let's go into more details and it's time control the Hulk's powers. 😎
[[ Value ]]: As the name suggests, this attribute stores a value that is assigned to the property of objects. This is the location from which the property's value read and to which new value are saved. The default value for this attribute is undefined. Consider our SuperHero Object again and let's have name only be the property of it:
So here property name has the value Hulk, and this value get stored in [[ Value ]]. It means any change to name property's value will stored in [[ Value ]].
[[ Enumerable ]]: Indicates if the property will be returned in a for-in loop. By default, this is true for all properties defined directly on an object, as in our SuperHero example.
[[ Configurable ]]: Indicates if the property may be redefined by removing the property via delete, changing the property’s attributes, or changing the property into an accessor property. By default, this is true for all properties defined directly on an object, as in the previous example. Let's have one more object and name it Avengers. Let's make a Hulk a part of the Avengers team. First, we will create an empty object and assign property and values using attribute method Object.defineProperty( ) which we have discussed above.
Now, here we have created a new property as memberName and assign a value to it using [[ Value ]] attribute. Also, we have used [[ Configurable ]] property here and setting configurable to false means that the property cannot be removed from the object. The name property can't be configurable now or we can't remove it using delete keyword. In the above example we have already deleted name property, but still we can access the name property. This is because of False Configurable attribute which makes it non removable. That's interesting na... 😮
[[ Writable ]]: Indicates if the property’s value can be changed. By default, this is true for all properties defined directly on an object, as in the our SuperHero example. Again, let's make another empty Object of avengerTeam and use Object.definedProperty() method to assign the property and values with attribute Writable. Have a look:
So here we have created a new property as memberName and assign a value to it using [[ Value ]] attribute. And we have used [[ Writable ]] property here and setting writable to false means that the property memberName can't be overridden. In the above example we have assigned a new value to memberNmae as IronMan but still we get the old property value. This is because of False Writable attribute which makes it only readable value. In this way we can a make a property read only property. No one then can replace Hulk from Avengers Team. That's interesting too na... 😮
Accessor Types: So we have explored Data Types Properties, now it's time to check out Accessor type Properties.
Accessor properties do not contain a data value like Data properties. Instead, they contain a combination of a getter function and a setter function (though both are not necessary). When an accessor property is read from, the getter function is called, and it’s the function’s responsibility to return a valid value.It also has four attributes namely:
So we have already studied about [[ Enumerable ]] and [[ Configurable ]] in Data properties and in Accessor properties they have some functioning. Here two terms have been added: one is [[ get ]] which is a function to call when the property is read from. The default value is undefined. and another one is [[ set ]] which is a function to call when the property is written to. The default value is undefined. Accessor properties also uses Object.defineMethod( ) as we can use Accessor attributes explicitly. Let's take an exmaple for this
So, in above example we have an object of Hulk Movie and we are checking wether the Hulk movie is part 1 or part 2 based on the year. Get and Set are acting as attributes here. Get return the year value and set is setting up the new value to year and update part property of objects. And assigning a new value year as 2011 it updates the part property using set function and get return this value. In this way Accessor Types are useful. That's all about the Accessor types properties. 😄
Note: The underscore on _year is a common notation to indicate that a property is not intended to be accessed from outside of the object’s methods.
Till then use your Hulk Powers to develop some awesome Applications. Because the world needs your creativity. 😎