Post
Ask Question

Do You Know JavaScript? Are You Sure? - Part Two

Introduction

 
Here, we are going to see another article in the JavaScript series. In the first part, we have seen some basics that you can start with. In this article, we will be discussing JavaScript object continuations and constructors, etc. You can always see my other posts related to JavaScript here. We will be using Visual Studio for our development. If you are totally new to JavaScript, I strongly recommend you read some basics here. I hope you will like this. Now, let’s begin.
 
Download source code
Background
 
This article is the second part of the series, which we have just started. If you haven’t read the first part yet, I strongly recommend you read it here.
 

Setting up the platform 

 
To start, we are going to create an HTML file and a JS file.
  1. <!DOCTYPE html>    
  2. <html>    
  3.     
  4. <head>    
  5.     <title>Do you know JavaScript? Are you sure? Part Two</title>    
  6.     <meta charset="utf-8" />    
  7.     <script src="JavaScript.js"></script>    
  8. </head>    
  9.     
  10. <body> </body>    
  11.     
  12. </html>    
Let’s begin our tutorial
 
Now, please open your JavaScript file. We have some scripts to write.
 

Constructor

 
Have you ever created any constructor in JavaScript? Before creating one, it is better to know why there is a need for it. Let’s start with an example. Here, I am going to create an object called a bike.
  1. var bike = {    
  2.     name: "Thnuderbird",    
  3.     color: "Blue",    
  4.     CC: "350",    
  5.     company: "Royal Enfield",    
  6.     tankCapacity: "20",    
  7.     abs: false,    
  8.     showName: function() {    
  9.         console.log(this.name);    
  10.     }    
  11. };    
As you can read, this object holds the common properties of my bike Royal Enfield Thunderbird. Now, my question- is this is the only bike you know? Absolutely no, right? Therefore, suppose you need to create an object for the brand new Bajaj Dominor? What will you do? Creating another object? What will you do, if you know more than 10 bikes? If your answer is creating 10 objects, it's not fair at all. Instead, why don’t we share the common properties like name, color, etc?
 
Thus, we are going to create the objects but we are not going to create the properties again. Hence, let’s create an object for Dominor. Before doing this, we need to create a bike constructor, as shown below.
  1. function Bike(name, color, cc, company, tankCapacity, abs) {    
  2.     this.name = name;    
  3.     this.color = color;    
  4.     this.cc = cc;    
  5.     this.company = company;    
  6.     this.tankCapacity = tankCapacity;    
  7.     this.abs = abs;    
  8.     this.showName = function() {    
  9.         console.log('The name of the currnet bike is ' + this.name);    
  10.     }    
  11. }    
Now, we can create an object for Dominor, as shown below. Remember, when you write the word Bike, you can see that the IntelliSense is shown for you, which is shown below.
 
Constructor_intellisence
 
Constructor_intellisence
  1. var dominor = new Bike("Dominor", "Black", "Bajaj", "20", true);    
  2. dominor.showName();    
Have you noticed that we have not created the function showName in the object dominion,  but rather in Bike, and we are still able to use that in the object domino? You can see an output as preceding in your Browser console.
 
Dominor_object_output
 
Dominor_object_output
 
You can create an object for Royal Enfield Thunderbird, as shown below.
  1. var thunderbird = new Bike("Thunderbird", "Marine", "Royal Enfield", "20", false);    
  2. thunderbird.showName();   
 Thunderbird_output

Distinguish between own and inherited properties

 
As the heading implies, we have two kinds of properties, own and inherited. Let’s create an example to understand that.
  1. var thunderbird = new Bike("Thunderbird", "Marine", "Royal Enfield", "20", false);    
  2. thunderbird.isMine = true;    
  3. console.log(dominor.name + " is yours or not? ");    
  4. console.log("isMine" in dominor);    
  5. console.log(thunderbird.name + " is yours or not? ");    
  6. console.log("isMine" in thunderbird);    
  7. console.log("toString" in dominor);    
  8. console.log("toString" in thunderbird);    
Before running it, can you please guess what will be the output of the above code block? If you find the answer, check whether your answer matches the output given below or not.
 
Own_and_inherited_properties
 

Own_and_inherited_properties

 
So isMine is the property, which we just added to the object thunderbird and the same is not available in the object dominor. It's cool. Why the property toString is available in both the objects, we have not added it to our object. This is because toString method is being inherited from the Object.prototype.
 

Use of hasOwnProperty

 
In the code given above, we have just seen how to check if any property is available in our object or not, but it doesn’t mean that it is its own property. To check it, we can use the hasOwnProperty. Let’s find out, how to use it now.
  1. console.log(dominor.name + " is yours or not? ");    
  2. console.log(dominor.hasOwnProperty("isMine"));    
  3. console.log(thunderbird.name + " is yours or not? ");    
  4. console.log(thunderbird.hasOwnProperty("isMine"));    
  5. console.log(dominor.hasOwnProperty("toString"));    
  6. console.log(thunderbird.hasOwnProperty("toString"));   
Once again, please try to answer it on your own, before you run it.
 
hasOwnProperty_output
 
hasOwnProperty_output
 

Looping through the object

 
To loop through each item in an object, you can use it for loop, as shown below.
  1. for (var itm in thunderbird) {    
  2. console.log(itm);    
  3. }   
This is not the preferred way, as we have not checked for hasOwnProperties. We are supposed to iterate only the properties, which is it's own.
 
Looping_through_the_items_in_an_Object
 

Looping_through_the_items_in_an_Object

 
Thus, let’s rewrite the code given above, as shown below.
  1. for (var itm in thunderbird) {    
  2. if (thunderbird.hasOwnProperty(itm)) {    
  3. console.log(itm + ":" + thunderbird[itm]);    
  4. }    
  5. }   
Here, the output is given below.
 
Iteration_with_hasOwnProperty
 

Iteration_with_hasOwnProperty

 
We have seen enough about the objects. Do you have any idea how can you delete the property from an object?
  1. delete thunderbird.isMine;    
  2. for (var itm in thunderbird) {    
  3.     if (thunderbird.hasOwnProperty(itm)) {    
  4.         console.log(itm + ":" + thunderbird[itm]);    
  5.     }    
  6. }   
 

Delete_from_an_object

 
Now, it is time for a question. What would be the output of the preceding code?
  1. console.log(delete thunderbird.toString);   
It will return true, now run it again. What is the output? It will be true again. This is because toString is an inherited property, so it won’t be deleted. Thus, thunderbird.toString will always give you an output.
 
You can always download the source code attached to see the complete code and the Application. Happy coding.
 
References
See also

Conclusion

 
Did I miss anything that you may think is required? Did you find this post useful? I hope you liked this article. Please share your valuable suggestions and feedback.
 
Your turn. What do you think?
 
If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or E-mail me a link to your question there and I’ll definitely try to help if I can.


Similar Articles