Javascript Objects

JAVA SCRIPT OBJECTS

Java script Objects.

(00:00)

Hello guys welcome to our series Java script. Our last segment was all about functions in which we conducted total of 3 segments in which we saw what is function? How do we define function? Function with parameters and function without parameters and function with return value. We also saw what are function objects and how are they defined? We also saw methods of function objects call, apply, bind and tostring.

I hope you have practiced all the methods and practical from last three segment, if you have any questions regarding our segment or during practical if you have had any query do tell us on forums.learnvern.com we will revert back with solutions to all your questions. Let’s move further in our Java script’s next segment i.e. Objects in Java script. It is quite important topic, in our next few segments we are going to see about objects only like if we see objects is a very vast concept in Java script, many things are covered in objects like objects of Array, objects of string, objects of date, objects of math, objects of number and objects of Boolean, so all these objects are in built in Java script.

If we move further we have document related objects in Java script and also there are some objects related to browser like Document, Window, Navigator and Screen, we are going to cover all these topics one by one in our coming segments. Today we are going to study basics of objects like what are objects and how are they created?

So first is what is object in Java script? so a Java script object is an entity having state and behavior, we have created many objects till last segment when we saw call, apply and bind methods we created objects for each, so I hope you have a clear idea of how objects are created in Java script. When we were creating objects we defined properties of object as well as we defined methods of object like in last segment when we did bind that time in bind we defined a name property and we also defined a method by name getName.

So whatever our object oriented programming languages is in that property is known as state and method is known as behavior also, as it is written here state and behavior and in bracket properties and method are written, so whatever our state and behavior or properties or method are all that belongs to object. What is object? Object is such entity which have some properties and methods like here an example is given car, pen, chair, bike, glass etc.

Like it is car, then car have properties like brand, color and model etc. and what is its method? It is speed, means every time what changes? That is its speed which keeps on changing, similarly, pen also have property like color and how we write becomes its method. In case of bike it is same like car it also have properties like brand, color and model and its method will be speed. So each object has its own properties and methods.

 We know Java script is an object based model it is scripting language also but it is also object based model. In Java script we do not have class we saw that in last segment that Java script does not work on class. Java script is object based language so whatever we get we get that in form of object like our object of document and as we saw in our last segment math object in which we used methods like maximum and minimum. What is available to us in Java script? Object is available to us, that’s why Java script is object based language means that everything is object in Java script.

Next is Java script is template based not class based, just now I explained that in Java script class is not available, templates are available in Java script. This means we do not create class to get the object but we directly create objects, means in order to create objects what we do? We do not use class, I already taught you that variable name equal to new then constructor of class, when we do programming in Java or C++ we create object by this method but if we have to create object in Java script then we create it directly with new keyword. There are some more methods of creating object which we are going to see today.

(05:11)

What we have to remember? First thing that it is not class based, Java script is template based means we can directly create object without class. Here three ways are mentioned for, creating object in Java script, first is by object literal, second is by creating instance of object directly using new keyword, by using object constructor, here also we will use new keyword but there is minor difference between second and third point.

First we will start with Object by object literal, means we have already created object with the help of object literal in our previous examples. You can see here we take object then equal to and in curly braces we give property and some value again property and its value, we can add as many properties as we want and as many methods as we want, we call this literal so with help of literal we can create object.

For example if I open sublime text (3 seconds gap) example object, save (5 seconds gap) we will name it as object and save. Now in this object what we have to do? Simply with help of literal we have to define object which we have already done this so this easy for understanding, so var and the object’s name for example “person” then in curly braces let’s say we take first name and in that I added my name “Joel” then comma and another property so last name then age let’s say “28” and this is our number and we took one more property eye color, let’s say “brown”.

So in total we have added four properties in this object named person, you can add as many properties as you want, so this is our object, how is this object created? With help of object literal, so here we can add a comment creating an object using object literals. Okay so this was with help of object literals. Here we have example like we have created an object named employee in which id, name and salary has been used and with help of document dot write we have printed employee id, employee name and employee salary.

If we have to print this then we can do it in this way, document dot writeln first we will give heading( 4 seconds gap) in h3 creating object in Java script, so this is our program, this is our first way so what will we write? It is person so person dot first name plus plus person dot last name plus space person dot age, okay s here output is Joel Christian 28, okay. Now object details are, okay so this is our first name last name and age. This was our first way of defining object.

(09:54)

Now our second method is by creating instance of object. Means we are creating an instance of an object, variable object name equal to new object, so here with help of new keyword we are creating new object. So let’s say here I will write, next method, creating an object using new keyword means instance of an object. So in this we will write, here what have we done? We took one variable, let’s say variable employee Emp equal to new object, in this object what we have to write? Whatever data we want to add that, we will take 1 comma in string as we took I previous example like id, age and salary, so we will take same thing, so shyam kumar and salary is 20,000.

Now let’s see we are able to create it or not? So for that we will print this (10 seconds gap) object details of emp object is emp dot instead of first name we will take something like id but we have not printed anything like id then how will we access it? So I will remove this portion, emp dot id and along with this only its property will be defined, so let’s say I take id as 1 emp dot name equal to in string shyam kumar, emp dot salary equal to 20,000, here we have added all the three things, now with help of for we will retrieve our object, for value in emp document dot writeln, okay so here output is 1 shyam kumar 20,000.

We can write this in another way also, (10 seconds gap) object details of emp object and after that we will take these values so emp value plus space okay, so object details of emp object is 1 shyam kumar and 20,000, so this our data which is shown properly here.

Now we will see third method by using an object constructor, you need to create function with arguments, means here it is necessary to pass arguments to create function, each argument value can be assigned in the current value object by using this keyword. Means with help of this keyword we can store all the arguments generated in our object as value, so here what is mandatory for us? When we create an object with help of object constructor that time using this keyword is mandatory for us.

For example here you can see we are generating function, in our current program in which we saw two ways in that we never used function, so in our third way we are using function, means we will first generate function in which we will write id, name and salary means we will give any property and we will assign those values to object with help of this keyword, now whenever we will create new object of this function that time we can directly create it.

(14:33)

So here we will write, creating an object using (4 seconds gap) object constructor, here what we are doing? We are creating an object, so let’s say first we have to create function, so it will go like function we will create same employee function but here I will use employee as we have already created an object with name emp, so function employee, name of employee, id, name and salary. We have three things here so id, name and salary now in order to assign all these properties to object we will use this keyword so this dot id equal to id, so this dot id indicates object’s id which will be the above given id, this dot name equal to name, this dot salary equal to salary, so guys remember wherever we will use this that will become our object’s value.

Okay so we have added these three things to function, now we will create an object so let’s say variable, it is not compulsory to write variable but we write it variable e equal to new employee, means we will create this employee function’s object, id will be 2 and name is Pratik Patel comma and salary will be 40000. E has been printed and now we will print employee details, so let’s say object details of employee objects, so here what is our object? E, here only e will come and here we will write value.

So again here e and value, save here we will add br tag, so object details of employee object is 2 Pratik Patel 4000. So here we have created three objects with three different ways, first with help of literal, means we gave properties and property values and created object. Second we created with help of our object named object, we can also call it as object constructor, so with help of constructor, actually we cannot call it as constructor it’s better to call it new keyword because here with help of object named object keyword we have created new object named emp and after creating object we are assigning them properties.

So what is difference between literal and new keyword, in literal we have to first assign properties and with help of new keyword we can assign properties later. Last is with help of object constructor, so whenever we have to create an object with help of constructor for that we need to have an existing function, means function then function’s name and all the parameters mentioned here we have to pass them.

If we do not pass any one parameter then it will set as undefined and object will be created. If we pass any one parameter extra then the remaining parameters our object will be created but the extra parameter will not be assigned anywhere, so this was with help of constructor. So this is our output in which we can see values of all three methods.

So here we can write (4 seconds gap) in 4 using object literals (3 seconds gap) here we can write using new keyword and here we can write using object constructor. So using object literals, using new keyword and using object constructor, so these are till object constructor.

Next is how to define method in java script object? Means in java script how can we define method? So for creating object we saw three methods of creating object, now we will see how to define method? O here it is written we can define method in java script object. But before defining method, we need to add property in the function with same name as method.

Means whenever we have to define method that time we have to define property with same name, like here an example is given with name function emp which is already created, we have passed these three things named id, name and salary. But let’s say I have to create a function with name change salary, means I am updating the existing salary or adjusting it, making it less or more, then I need to define property with name this dot change salary, means whatever my function’s name is or method’s name is like in this object I am creating change salary named method, so I need to define a property of same name already. Means writing this dot change salary equal to change salary is mandatory then only I can generate that method.

Let’s say for this we will generate new program, (8 seconds gap) for method in object (3 seconds gap) so here we will add script, in this first we need to generate variable, so we will generate our employee named variable, let’s say I take this much portion and I don’t need this right now, so we have passed id name and salary, (14 seconds gap) okay so this our program creating method in object, so for that what will we do? We have created an object in which we have passed id, name and salary and along with that we have created an object named E of employee named object in which we have passed 2 Pratik Patel.

Let’s say now the value which is 40000 now, I will print this object details of employee object so 2 Pratik Patel, instead of this we can write ( 3 seconds gap) salary of here will come e dot name plus salary of name is e dot salary, so salary of pratik patel is 40000, now I want to write a method which will update my salary, and I will print both the salaries before updating also and after updating also.

So let’s say I have to create a method to see what my updated salary is? So to write updated salary, what is our today’s concept? Our concept is how to write method in object. So for that whatever method we will write we need to define it first with same name, so let’s say I have to create method of name update salary so it will be like this dot update salary equal to update salary, writing this line is compulsory. Means whatever my method’s name is like update salary I need to first define it to object.

Now I will create my method which will be like function in function that’s fine, update salary, in salary whatever current salary I am updating I need to pass that so let’s say I will take new salary as we have already taken salary, let’s take a new variable and pass new salary parameter, so now this dot salary equal to new salary means what is object’s salary value? This dot salary means 40000 and now I am updating with help of my update salary method, so what parameter am I getting? New salary.

So I will update object’s salary that is this dot salary with my variable value, so this dot salary equal to new salary, now I will execute this update salary portion, so that will be my e dot update salary instead of 40000 I will write 50000, and then I will print this line again (3 seconds gap) so updated salary of e dot name is e dot salary so save and reload, so here you can see, here I will add br okay , salary of pratik patel is 4000o then when I updated it means when I called the update method, after updating, updated salary of pratik patel is 50000.

So here what we are getting? First we were getting a salary which we passed during object creation, so this is my function and I have to create its object so I will do it in this way, var e equal to new employee and I will pass the details so in that case I passed 40000 and set the value of salary. So initially I printed it during object creation, now let’s say after 1 year the value has updated means salary has increased, so in that case I will e dot updatesalary named function which is my object’s method.

So in function I have created object’s method, so for object method what we have to remember is whatever name we give we have to define it as property means my function’s name, means the method which I am going to create for my object then its name abc I have to define as property.

This dot id is my object’s property, this dot name is my object’s property, this dot salary is also my object’s property, so I have to define every object’s property in this way only, so If I create another function with name xyz then I have to first write it like this, this dot xyz equal to xyz which is mandatory, so it is like compulsory for us, first write it as property then you can write whatever function you have to define. So here I have called this function and I have updated it also.

 So this was our how to define method in Java script, in Java script after creating object how we define it. This is same program which we have done, so this is it for today’s segment like how to create object? And how to create method in object? So I request if you have any questions or queries regarding today’s segment then do tell us on forums.learnvern.com and if you have any doubts while doing practical that also you can ask on forums.learnvern.com we will revert back with solutions to your queries.

In our next segment we will continue with objects only but that will be new module that is Browser object model in which we will see different types of browser’s objects available to us in Java script, we will see different browser related objects.

See you in next module guys, thank you.

(video duration: 28 minutes 2 seconds)