javaScript object oriented programming tutorial - Understanding Objects Part 1

hi and welcome to tech seat tutorial today we are going to understand objects in JavaScript so first step in understanding object-oriented JavaScript is how to create objects in JavaScript and then we're going to proceed to adding and removing properties to those objects that we just created and then we can add some methods to it and it's not going to be complete without adding some private variable and methods remember this is very important you know to achieving camp capsulation in JavaScript and last but not least creating closures this is some of the exciting programming that you can do with closures and but before that you have to understand how to how the objects works in JavaScript so let's start first creating the object in JavaScript I would categorize JavaScript objects in two categories non function objects and function objects yes functions are also objects in JavaScript now let's do some programming first of all if you're not familiar with this website this is a wonderful website called jsfiddle dotnet it's a it's called code playground which means you don't need any server to actually try out javascript HTML and CSS here on this first block you can write your HTML code your CSS would go here and then you can write your JavaScript here and then you would see the result directly here so now without any delay let's start writing our first line of code so I'm going to create an empty object it's very easy all you have to do is say var X equal to new object this actually creates a new object in JavaScript now how do I really know that it created this new object there is a wonderful debugging tool that's provided by Chrome Firefox also provide similar to so but I but I prefer a chrome because they're constantly upgrading so in order to get there if you right-click on on your browser Chrome browser and a protect element you would you would get into this this this panel would open up at the bottom people it would open up on the other side here on the right side here but either case you would see this they're a bunch of tabs here but the most important thing the tab right now that you should be concerned with is console tab if you click here you can actually see this this console area now in order to find out if this the object was created or not what I'm going to do is I'm going to write a line called console dot log and I'm going to pass X to it what it really means is I want to see this object and have in memory how is it created so if I just run here so this place here right here on the top fight when I run it actually execute this code and as you can see it's showing the empty object called object and then open and close curly bracket this is an empty object you can also create an empty object by simply saying ver y equal to open and close curly bracket this also create an anti object is exactly the same thing as the first line so let's see if it creates what we expecting it to be so I'm going to pass Y here I'm going to type there's a there's a button here go tidy up then click here it tied tidy up so code it doesn't actually do vertical tidiness but it it does the horizontal tidiness now when I run it again I would see also you can actually this button you see here which clears up a DP log so if I'm running again I might want to clean it up before I run it so that the previous run doesn't get mixed up with what the new run so if I click here again I can see through objects and they're exactly the same there's also another command called dir when I do this it gives you a little bit more detail inside the object and when I click here as you can see it's it's giving me this proto will go into it later on I just want to know that this is available to you so you can look at the object in much more detail now that we know how to create an empty object I would say jasmine and clean but you can as I said you can also use a first method now that we know how to create an empty object we will create an object with some properties and methods so let's create something meaningful Pizza equal to this is initially we will create an empty object and then here inside we can add some property so the first property we'll add is crust I'm going to use : to separate the property and property value so the property value here would be thin let's say and we can use comma just to add another property called toppings and the toppings would be 3 that's a number so the crust is a string toppings is a number and then we'll add another property call has bacon now this property would be true mince yeah it has bacon this is a boolean I will add another method call how how many toppings okay it will return the number of toppings so for that instead of adding a property value we'll just add a function now in between here we will simply say return this dot toppings now pay attention this on this keyword actually allows you to access any properties and method within this object any public properties and methods crust toppings has bacon they're all public properties and how many toppings is also a public method so we can directly access the public properties in map method using dot notation this and dot notation so here we will return three now this is object that we created now let's see how to access the properties we can simply do it by using dot notation by saying dot crust this would give us thin how do we know let's add console.log we'll see okay as you can see it's returning thin I can also do has bacon which will return true as you can see it's returning to so this is how you can write the properties and access the properties now what if I want to add another property after creating the object you can do that this in JavaScript so what I'm going to do I'm going to add another property called price I can simply add this property by using again a dot notation and I'm going to define the price twelve dollars it's a string and I can look at this object again after adding this this should be added in this object pizza let me clear this first and run it now as you can see it's added inside how do I run the method exactly the same way you can simply say pizza dot how many toppings in here I have to use because as a function you have to execute it by this so I can also console this out now this has axe this has access to the topping so it should return a number of toppings this is how you comment a line if you don't know if I run this this should return three so it's running this function and this function is returning the number of topping which is two here now how do I remove a property let's say I like to remove crust from this pizza I can simply say delete Pizza dot crust and I'm going to activate this line here which will print out the pizza object and comment this line out now let's run this and let me first clear this now when I run this I should see the object but this time there is no crust so it deleted the property so we can add the property accesses and delete it in this case pizza is a actually a singleton single DeMint's you can you only create it one time and you don't create other objects from this that's why we can we can easily access directly after creating we can access directly using a dot notation but let's say if you want to create objects from other objects remember JavaScript does not have any formal support for classes which means instead of creating a class and creating object from it objects from it we are going to create objects and then creating other objects from it using this kind of objects we cannot do that so for that we have to use a functional object so let's let's see how to how to do that so as I said before in JavaScript functions are also objects so I can simply say Pizza equal to function and this is a function object I can simply say like if I want to look at this object in the console log blog I can say pizza now it's gonna be a little bit different than the other object not action object as you can see it's showing you simply a function if I just - dir it might show you a little bit more so it added all this other properties like arguments collie color length name and then it also has a proto which which we saw in the previous example as well but it has an additional stuff it additional thing called a pizza I mean function which which allows it to execute so this object has ability to execute which means you can create other objects from it here also we can do we can create public properties by simply using this keyword so if I can say this time crust equal to then I just create a a public property I can also say this start toppings equal to three and this dot has bacon equal to true now let's look at it how it looks like when I see the object you can see the object but you don't see the property's public properties that is a huge difference between the previous example and this you cannot simply access crossed here after creating object like this so if I did this it would give me an error called undefined let me clear this and then run it again and it gives me an error in order to access the the properties I have to create an object from this object so what I'm going to have to do is I'm going to create a pizza a variable pizza a equal to new pizza now here I'm executing this remember you always have to use keyword new and now I can access the property crust now when I do this it will give me thin I can also create another pizza pizza B and I can also get the crust out of it using this now how do I know these are separate to separate pizza well let's let's do a test so I can change the pizza a crust by crust equal to 10 so I've change the crust of pizza a two pan from thin but the pizza B still remains the thin now let's see if that really happened so as you can see Pizza a has a ten pan pan crust and pizza B has thin crust so they are two separate objects so now we have created two objects from this definition of pizza which is the master object so we just created our first constructor using this line a new pizza let's see how it really works so we can say Pizza B is instance off off sorry Pizza B instance off pizza so ditch this should return true which means Pizza B was created from pizza so if I run this it returns true I can also say Pizza B dot constructor and this returns the the pizza function which is this so it also returns so we know what is the construction constructor of Pizza B so we had our first experience of object-oriented programming here now let's create private variables and private methods so which is exactly the same way to start with Pizza equal to function but insert using this we'll just use a bar bar crust equal to ten here if I just if I create a new pizza from it so let's say using an constructor I can save Pete variable pizza a equal to new pizza and console dot d our pizza a when I run this I do not see the crust inside mint is a private variable I do not see it anywhere actually it's hidden from us here but if I just say variable has bacon so instead of making it private I'm just going to say this dog has bacon equal to true and if I run this again let me just clear learn again so now it's clean I can see has bacon equal to true but I do not see crust here and that means this is hidden to us I can write a method here and I can write a public method here get as bacon equal the function so going to side return this dot has bacon so if I do pizza a dot get has bacon I would get true to say log here let's see lock it's returning true if I write another matter this dot get crust equal to function and I don't how to use this because it's a variable if you if you know how the scope works so crust is available to any any of the functions inside this object so I don't have to use this I can just simply use a return crust so how you are using here this dot bacon we can just simply use crust because it's private variable and I can hear I can say console.log pizza a dot get crust and it's returning so I can actually access this private variable using a public method this bold public matter and this is this one is accessing public property and this one is accessing public private a variable now let's do something else here how about creating a private matter so I can say variable for that I'm going to create a third variable call their toppings equal to three and I'm going to add another a private method can do by to simply create another variable so instead of using this I'm just going to simply use their get toppings and equal to function now remember this is a private function which means we cannot use pizza get toppings directly so I'm going to return toppings as you can see it's also because the private variable I can simply return it using without using this now let's let's see what happens when you try to execute it it won't work so let's see but console dot log pizza a dot get toppings it says it's not a function because it doesn't know that this function exists and if even if you simply look at this by trying to print the object I would see all the other methods I would get crust and has bacon which are public methods but I don't see that get topics here so how do I really access this method now we have a kind of done we have a private variable and we have a private method accessing private item so there is a way so first of all we have to do is we need to remove all these public methods and only keep the private stuff here so we can see things more clearly okay now what we have to weave in what we have to do we have to return this dysfunction somehow now in order to do we have to create a non-functional object here so I'm just going to create a function a variable called temp it's an empty variable empty object and I'm going to create a method called get exactly the same name here get toppings equal to get toppings what it's doing is I created a name of the property get toppings and assign to this private matter I know it's very confusing but if you try to understand it's a simple it's a simple object empty object I created a method a public matter for this temp and assigned and this method to it so now this method became part of this tap ok and I'm going to simply return this TMP now pay attention to this because this is very important so what happens when I do this when I when I do a constructor what is it doing it's going to return this object temp so let's see what what really happens so when I do this it does not have any public stuff but it's it has this this public method doesn't have a public property but it has public method go get toppings which you can see here ok and if you look at inside you don't see much now I can really call this get toppings here and execute this dysfunction get toppings right because I returned I got this temp variable out when I want to execute this and so now I can return I can I can execute this and I'm getting 3 which means it did return this topics the confusing part is when you run this constructor it basically returns this object temp and with what one public method get' topics right so this a pizza a is essentially nothing but temp object right and we can just call its method get toppings and it would get us the toppings but how does it you know once we get the method out we have a return the value itself the topping itself because it was part of this object how does it remembers the topics I understand the method but how does it have access to this this toppings after returning this because here we are not mentioning anywhere we're not bringing the toppings with it this is what is called closure so in order to see it I'm just gonna do this when I when I console.log this I can if I expand this object a little bit and expand the the get toppings function here here I have a function scope and if I click on here it has something called closure if I expand the closure it actually binded this this variable inside the closure that's how it it has access when I run this when I do pizza dot a pizza a dot get toppings it has access to its getting it from there from from the closure so closure is nothing but when I return this up this object temp with this this function get get toppings it knows that it it has to grab all the associated variable in this case is toppings into the closure if you notice that it did not get the crush it only got toppings because it's associated with this function so what it does is when it's returning when it's returning this thing this this variable temp it has to not only return the function get topics but any variable that is associated with it which is topics so that's how it's doing it I know it's too much to digest here but I would suggest that you know go through this tutorial couple times try to understand the fundamentals and you know practice practice practice that's how you're going to learn you're not going to probably learn just by looking at this tutorial so please practice and subscribe to this channel if you want the future tutorials and also you know please feel free to you know give your comment if you confuse on a particular item you know just send me a message or comment and I'll I'll get back to you you know within a week or so and if you have a particular topic in mind that you want to be covered please also let me know and please like and subscribe thank you hope you have learned something from this

Channel: techsith

Views: 85,611

Keywords: Object-oriented Programming (Programming Language Paradigm), JavaScript (Programming Language), Programming Language (Software Genre), Tutorial (Media Genre), oop, Technology, html5, techsith, techsith.com, javascript functions, javascript tutorial, learning programing, Web Development (Interest), Web Developer (Job Title)

Id: DpFDj-6iYoY

Length: 33min 37sec (2017 seconds)

Published: Wed Sep 23 2015