Why to worry? When

Javascript

is here!

Let's dive into Object Oriented Javascript!

So, what we are going to explore? 🤔

Javascript is one of the famous and powerful language like ours Hulk. And in this part we are going to explore some of the internal powers of Hulk... I mean powers of Javascript 😅
So, We will cover up some basics of Javascript and explore the internal properties of JavaScript Objects. Now it's time to wake up our hulk and let's get started 😎

Javascript is not an object oriented language so why we use Objects here? 😮

Though ECMAScript (Javascript) has no concepts of classes that's why Javascript is not a purely Object Oriented Programming Language. Also, the handling of objects here is different from the other class-based programming languages like Java, C++, Python, etc. Moreover, in Javascript, Objects are the unordered collections of properties each of which contains a primitive value or functions or objects. Or simply we can say that Objects is an array of values in no particular order.
As a conclusion, Javascript is not an Object Oriented Language but still we can use objects and treat them in a different way. Because every superhero has his own unique and awesome power 😈

First thing first, Objects and their Properties!

Wait, what are Objects? Are they non-living things? 😕

Objects can be a living or non-living things, but in the Coding world. One of the main feature of Object based Programming languages is that they we can easily relate real life problems using Programming Languages. Objects are nothing but same as our real life Objects like chair, table, car, etc. And over these, each object can be categorised to a particular group which we call as a Class. Like Hulk, Iron Man, Superman are all objects that can be categorised into a superhero group or Superhero Class. But in Javascript we don't have a Class system that's why we use some different approaches in Javascript. We will continue that part in the upcoming blog. But first, let's explore objects in details. 🙂

Exploring Objects in Javascript or powers of the Hulk! 😎

As we have discussed earlier, Objects are the unordered collections of primitive values, functions or Objects. And there are many ways to create an Object in Javascript. We will see them in the next part. For now, let's take one of the famous creation methods of Objects which is Literals method. This method is one the simplest and most popular method among developers now a days. Literals Objects are defined as a group of different properties or functions. Talk is cheap, let's enter into the war 🤐
Creating our first Superhero Object Literal:

var superHero = {
    name: "Hulk",
    weight: "1400lbs",
    getName = function( ){
        alert(this.name)
     }
};

So, above we have created a Superhero object and named it as superHero under which we have assigned 2 properties and one function. This is a Literal representation of Objects. We have 2 properties, namely name with value Hulk and weight with value 1400lbs. Also, there is one function as getName which gives the name of the object. These properties are all created with certain characteristics that define their behavior in JavaScript.
So by executing below the commands we have the following respected outputs:

alert( superHero.name )     // Hulk
alert( superHero.weight )     // 1400lbs
alert( superHero.getName( ) )     // Hulk

This is just a simple trick to create and execute the Objects. We will go into more details of the Objects but before that we have to explore the characteristics of Javascript Objects Properties. 🙂

Time to Digging out some characterisitics of Objects Properties! 😈

Javascript Object's properties have some internal characteristics that are used to control the actual behaviour of Javascript via internal-only attributes. I know it's a little bit confusing, but believe me at the end you will know everything about it. 🤐
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

Understanding types of Properties!

Data Types Properties! Okay, so what are they? 🤔

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. 😎

Data Types Attribute - [[ Value ]]

[[ 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:

var superHero = {
    name: "Hulk"
};

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 ]].

Data Types Attribute - [[ Enumerable ]]

[[ 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.

Data Types Attribute - [[ Configurable ]]

[[ 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.

var avengerTeam = { };

// Passing three arguments as object name, property name and attribute descriptor Object.
Object.defineProperty(avengerTeam, “memberName”, {         
    configurable: false,
    value: "Hulk"
});

alert( avengerTeam.memberName );      // ”Hulk”
delete avengerTeam.memberName;
alert( avengerTeam.memberName );      // ”Hulk”

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... 😮

Data Types Attribute - [[ Writable ]]

[[ 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:

var avengerTeam = { };

// Passing three arguments as object name, property name and attribute descriptor Object.
Object.defineProperty(avengerTeam, “memberName”, {         
    writable: false,
    value: "Hulk"
});

alert( avengerTeam.memberName );      // ”Hulk”
avengerTeam.memberName = "IronMan";
alert( avengerTeam.memberName );      // ”Hulk”

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... 😮

Now we know Data Types Properties but what are Accessor Properties then? 🤔

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

var hulkMovie = {
     _year: 2010,
     part: 1
};

Object.defineProperty(hulkMovie, “year”, {
     get: function( ){
         return this._year;
    },
     set: function(newValue){
         if (newValue > 2010) {
             this._year = newValue;
             this.part += newValue - 2010;
        }
    }
});
book.year = 2011;
alert(hulkMovie.part);      // 2

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.

Time to Summarize the powers of Hulk!

What we have learnt so far? 🤔

We have explored some basics of Objects in Javascript, there properties and gone through the details of Properties Types where we found 2 Types namely Data Types and Accessor Types and studied how to implement them. As a result, we have assigned our Hulk to Avengers team and check the latest version of Hulk Movie. 😎

What's next? 🤔

The second part will introduce you to the Spider Man and his powers. It will contain some amazing approaches for the creation of Objects in Javascript. We will also see objects implementations and explore Constructors, Inheritance.
Till then use your Hulk Powers to develop some awesome Applications. Because the world needs your creativity. 😎

Your words really mean to me, Just say them!

Thanks for giving your time, hope you liked it! 😊