JavaScript In Simple Language – Sibeesh Passion

Do you know JavaScript? Are you sure? – Part Two

SibeeshVenu — Sun, 05 Mar 2017 09:21:30 +0000

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

Download source code

Do you know JavaScript – Part Two

Background

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

Setting up the platform

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

[html]

Do you know JavaScript? Are you sure? Part Two

[/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 going to create a one, it is beter to know what is the need for it. Let’s start with an example. Here I am going to create an object called bike.

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

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

[js]
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);
}
}
[/js]

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

Constructor_intellisence

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

Have you noticed that we have not created the function showName in 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 preceding in your browser console.

Dominor_object_output

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

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

Thunderbird_output

Distinguish between own and inherited properties

As the heading implies, we have two kind of properties, own and inherited. Let’s create an example to understand that.

[js]
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);
[/js]

Before runningit, Can you please guess what will be the output of the above coce block? If you find the answer, check whether your answer matches the below output.

Own_and_inherited_properties

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

Use of hasOwnProperty

In the above code, we have just seen how to check 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.

[js]
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"));
[/js]

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

hasOwnProperty_output

Looping through the object

To loopthrough the each items in an object, you can use for loop as follow.

[js]
for (var itm in thunderbird) {
console.log(itm);
}
[/js]

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

Looping_through_the_items_in_an_Object

So let’s rewrite the above code as follows.

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

Here is the output.

Iteration_with_hasOwnProperty

We have seen enough about objects right? Any idea how you can delete the property from an object?

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

Delete_from_an_object

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

[js]
console.log(delete thunderbird.toString);
[/js]

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

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

References

See also

Articles related to JavaScript

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. 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 email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Do you know JavaScript? Are you sure? – Part 1

SibeeshVenu — Tue, 28 Feb 2017 17:22:18 +0000

[toc]

Introduction

Here we are going to a series of articles related to JavaScript. As this is the first part of the series, here we are going to see some basics of JavaScript which you may forgot or you may not be aware of it. You can always see my other posts related to JavaScript here. We will be using Visual Studio for our development. Basically, JavaScript is a programming language of HTML and Web. Now a days we can create any kind of applications using JavaScript. 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 source code

You can always download the source code from here Do you know JavaScript – Part 1

Background

Recently I was assigned to a training task where I need to train one of my colleague who is a fresher and totally new to programming field. I had covered almost all the topics in my training and I am sharing few of them here. I hope you will like this.

Using the code

Create a HTML page

As we already said, JavaScript is a programming language of HTML and Web, we need a page to work with JavaScript. Let’s create it first.

[html]

[/html]

Now create a JS file and include it in your page.

[js]

[/js]

Let’s begin our tutorial

Any idea, what will be the output of the preceding lines of code.

[js]
console.log(2 + 2);
console.log(2 + “2”);
console.log(2 + “2” + 2);
console.log(2 + 2 + “2” + 2);
console.log(2 + 2 + “2” + 2 + 2);
console.log(2 + “2” + 2 + “2” + 2 + 2);
console.log(“2” + 2 + “2” + 2 + 2 + 2 + 2);
[/js]

Once after you run your application, press CTRL+SHIFT+J if you are opening your application in Google chrome or CTRL+SHIFT+K if it is Mozilla, or press F12 if in IE. This will open the browser console. Now check the output, is it the same as you thought?

Javascript_tutorial_output_1

If you noticed well, console.log(2 + 2 + “2” + 2 + 2); returned 4222. First twos are added and when it comes to the third digit, the type of the result is being changed to string, so the string concatenation is happening. This is because of the dynamica nature of JavaScript.

So you can always add different types of values to the same variable in JavaScript. The preceding codes will always be working perfect.

[js]
var a = 1;
a = “Sibeesh”;
[/js]

Now a simple test, what will be the output of the preceding code?

[js]
var b;
console.log(b);
[/js]

Yes you are right it will return undefined as we have not assigned any values to the variable b. Have you ever checked the typeof an undefined variable?

[js]
console.log(typeof(b));
[/js]

The result will be undefined. Now what about the preceding codes?

[js]
console.log(typeof(undefined));
console.log(typeof(typeof(b)));
console.log(typeof(String(b)));
console.log(typeof({a:b}));
console.log(typeof(null));
[/js]

It can give you an output as below.

[js]
undefined
string
string
object
object
[/js]

Here one thing to be noted is, typeof(typeof()) will always return string. And {a:b}, null is actually objects so the typeof will return the type as object. Let’s write a simple program now.

[js]
var a=1;
var b=a;
a=2;

console.log(b);
console.log(a);
[/js]

See, how simple it was. Any idea what would be the output of that? If your answer is 1 & 2, then you are right? Have you ever thought why is that? This is why the variable we just created are primitive types. In primitive data types the values are saved directly on the variable. If you are coming from the backgound of C#, you can understand the value typed variable.

Now we have one more data type which is referenced variable where values are stored as a reference not a direct values. An example for a referenced type variable is Object. Let’s go on to the next topic which is overview on JavaScript Objects, Do you know how to create an object?

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
console.log(myName);
console.log(JSON.stringify(myName));
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

Here myName is an object. You can always use JSON.stringify() to make your object to a string format and JSON.parse() to make your string to object. So the above code will give you an output as follows.

Javascript_tutorial_output_2

An object is a collection of key-value pairs, like we see in the above object, firstName is key and “Sibeesh” is value. How can we take any values from an object? We can always access a property from an object using dot(.) operator as follows.

[js]
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

And also using a bracket ([)

[js]
console.log(myName[“firstName”]);
console.log(myName[“lastName”]);
[/js]

The above codes will give you an output as “Sibeesh” “Venu”, right? We just accesses a property from an object. Now we have given string value to our object as a key? Is there anyway we can give a key in number format? Let’s have a look.

[js]
var myName = {1: “Sibeesh”, 2: “Venu”};
[/js]

The question is, how can we access values of the keys 1 & 2? Like below?

[js]
console.log(myName.1);
console.log(myName.2);
[/js]

If you said “Yes”, you are wrong. If you try to accecc the values as above, This will throw an “Uncaught SyntaxError” error, so how can we access it?

[js]
console.log(myName[“1”]);
console.log(myName[“2”]);
[/js]

So when the key value is a number, we must use [] for accessing the values. Now Lets go back to the previous object.

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
var myNameCopy= myName;
myName.firstName = “Sibi”;

console.log(myName.firstName);
console.log(myNameCopy.firstName);
[/js]

Any idea what will be the output of the above code? Have you just said Sibi Sibeesh? Oh, man. You got confused. The actual output is Sibi Sibi. As we said earlier, an object is an example of referenced type variable where the values are stored as a reference to it. So even if change the value of our first object, that will reflect is our second one too.

In the above examples we have created objects like below

[js]
var myName = {firstName: “Sibeesh”, lastName: “Venu”};
[/js]

This way of careating an object is called Object literals. Now the questuion is, is this the only way of creating the object? There is one more way, which is known as Object Constructor. Now we can create the same objects in Object constructor way.

[js]
var myName = new Object();
myName.firstName = “Sibeesh”
myName.lastName = “Venu”;
console.log(myName.firstName);
console.log(myName.lastName);
[/js]

Is there any rule that we can add only varibles to an object? Absolutely no, an object can hold a function too. Let’s create an object with a function inside.

[js]
var myName = {
firstName: “Sibeesh”,
lastName: “Venu”,
myFullName: function(){
console.log(myName.firstName+” “+myName.lastName);
}
};
[/js]

So the code myName.myFullName(); will return my full name “Sibeesh Venu” as output. Right? So from the above code, we can create a functions in JavaScript as follows?

[js]
var myFullName = function(firstName, lastName){
return firstName + ” ” + lastName;
}
[/js]

If you call the above fucntion as preceding, you will get an output as “Sibeesh Venu”

[js]
console.log(myFullName(“Sibeesh”,”Venu”));
[/js]

The question is, what if we are passing only one values? Let’s try that out.

[js]
console.log(myFullName(“Sibeesh”));
[/js]

If you are working in any server side languages, this will actually give an error like “fucntion with one parameter couldn’t find”. But JavaScript is not like that, even if you are wrong, it will try to make you are right. So in this case, it actually treat the second parameter as undefined and give you an output as “Sibeesh undefined”.

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

References

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu