Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What I Learned from Teaching JavaScript, Part Two

DZone's Guide to

What I Learned from Teaching JavaScript, Part Two

In this article, MVB Sibeesh Venu walks us through using JavaScript continuations and constructors. If you're new to web dev or a seasoned pro, he offers up good advice.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Here, we are going to a see an another article of the JavaScript series. In the first part, we saw some basics that you can start with. In this article, we will be discussing the JavaScript object continuations and constructors. 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 to read some basics here. I hope you will like this. Now let’s begin.

Download the Source Code

Do you know JavaScript – Part Two

Background

This article is the second part of a series we have just started. If you haven’t read the first part yet, I strongly recommend you to read it here.

Setting Up the Platform

To get started, we are going to create an HTML file and JS file.

<!DOCTYPE html>
<html>
<head>
    <title>Do you know JavaScript? Are you sure? Part Two</title>
    <meta charset="utf-8" />
    <script src="JavaScript.js"></script>
</head>
<body>

</body>
</html>


Let’s Begin Our Tutorial

Now, please open your JavaScript file. We have some scripts to write.

Constructor

Have you ever created a constructor in JavaScript? Before creating one, it is better to know what it is the needed to do. Let’s start with an example. Here, I am going to create an object called 'bike.'

 var bike = {
     name: "Thnuderbird",
     color: "Blue",
     CC: "350",
     company: "Royal Enfield",
     tankCapacity: "20",
     abs: false,
     showName: function() {
         console.log(this.name);
     }
 };


As you can read it, this object is holding the common properties of my bike Royal Enfield Thunderbird. Now, my question is: is this is the only bike you know? Absolutely not, right? So suppose you need to create an object for the brand new Bajaj Dominor? What would you do? Create another object? So what if you know more than 10 bikes. If your answer is creating 10 objects, that’s not fair at all. Instead, why don’t we share the common properties like name, color, cc, etc. So we are going to create objects, but we are not going to create the properties again. So let’s create an object for the Dominor. Before doing that, we need to create a bike constructor as follows.

function Bike(name, color, cc, company, tankCapacity, abs) {
    this.name = name;
    this.color = color;
    this.cc = cc;
    this.company = company;
    this.tankCapacity = tankCapacity;
    this.abs = abs;
    this.showName = function () {
        console.log('The name of the currnet bike is ' + this.name);
    }
}


Now we can create an object for the Dominor as follows. Remember, when you write the word Bike, you can see that the IntelliSense is shown for you as follows.

Image title


 Constructor_intellisence 

 var dominor = new Bike("Dominor", "Black", "Bajaj", "20", true);
 dominor.showName();


Notice that we have not created the function showName for the object Dominor, but in Bike, and we are still able to use that in the object Dominor. And you can see an output as follows in your browser console:

Image title

 Dominor_object_output 

And you can create an object for Royal Enfield Thunderbird as follows:

var thunderbird = new Bike("Thunderbird", "Marine", "Royal Enfield", "20", false);
thunderbird.showName();


Image title

 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.

var thunderbird = new Bike("Thunderbird", "Marine", "Royal Enfield", "20", false);
thunderbird.isMine = true;

console.log(dominor.name + " is yours or not? ");
console.log("isMine" in dominor);
console.log(thunderbird.name + " is yours or not? ");
console.log("isMine" in thunderbird);
console.log("toString" in dominor);
console.log("toString" in thunderbird);


Before running it, guess what the output will be for the above code block. If you find the answer, check whether your answer matches the below output:

Image title

 Own_and_inherited_properties 

So isMine is the property that we just added to the object thunderbird, and the same is not available in the object dominor. That’s cool. But why is the property toString available in both objects, have we not added that to our object correctly? This is because the toString method is being inherited from the Object.prototype.

Use of hasOwnProperty

In the above code, we have just seen how to check if any property is available in our object, but that doesn’t mean it is its own property, right? To check that, we can use the hasOwnProperty. Let’s find out how to use it now.

console.log(dominor.name + " is yours or not? ");
console.log(dominor.hasOwnProperty("isMine"));
console.log(thunderbird.name + " is yours or not? ");
console.log(thunderbird.hasOwnProperty("isMine"));
console.log(dominor.hasOwnProperty("toString"));
console.log(thunderbird.hasOwnProperty("toString"));


Once again, please try to answer it your own, before you run it.

Image title

 hasOwnProperty_output

Looping Through the Object

To loop through each item in an object, you can use the loop as follows:

for (var itm in thunderbird) {
    console.log(itm);
}


This is not the preferred way as we have not checked for hasOwnProperties , we are supposed to iterate only the properties which are its own.

Image title

 Looping_through_the_items_in_an_Object 

So let’s rewrite the above code as follows:

for (var itm in thunderbird) {
    if (thunderbird.hasOwnProperty(itm)) {
        console.log(itm + ":" + thunderbird[itm]);
    }
}


Here is the output:

Image title

 Iteration_with_hasOwnProperty 

Have we seen enough about objects? Any idea how you can delete the property from an object?

delete thunderbird.isMine;
for (var itm in thunderbird) {
    if (thunderbird.hasOwnProperty(itm)) {
        console.log(itm + ":" + thunderbird[itm]);
    }
}


Image title

 Delete_from_an_object 

Now it is time for a question. What would be the output of the following code?

 console.log(delete thunderbird.toString); 


It will return true, now run it again. What is the output? Again true? This is because toString is an inherited property, so it won’t get deleted. So thunderbird.toString  will always give you this output.

That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

References

  • JS
  • See Also

  • Articles related to JavaScript
  • Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

    Topics:
    javascript ,web dev ,html

    Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    The best of DZone straight to your inbox.

    SEE AN EXAMPLE
    Please provide a valid email address.

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
    Subscribe

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}