Object Oriented JavaScript Tutorial #3 - Updating Properties

or rather than so we have this object now encapsulating everything it means to be this user in one single place and that is a good good first step and we can access these properties right here and these methods by dot notation we saw that in the last video I could say use a1 which is the variable name here the object itself dot name and that is going to access this property right here so we can use this dot notation user 1 name user 1 email user 1 dot log in but say for instance I wanted to update one of these properties and a certain time in my code how do I do that well it's pretty simple we can just say user one name and then set that equal to something else so I could change the name from Rio to a Yoshi or something like that so if I save this now and then call over here user 1 oops have to spell it right user 1 then this will show me the object and the name is now Yoshi because down here we changed the name but if I change it back and I can do that in the console as well use a 1 dot name is now equal to a ryu again then this should update so if i call you to 1 again to see that object we can see the name property is now right all right now we can access properties in other ways we don't just have to use dot notation we can use square brackets as well so say for example I want to access the email property using dot notation and say user 1 dots email right not getting me but I can also use square brackets I can say user 1 and then in square brackets inside a string the email property right and it's important you put this in a string you can't just say email like that it needs to be a string and that it's going to go out and it's going to do the same thing as this it's going to give me the email property of this object so if a press enter we can see that now cool so that works as well and of course we can also update properties this way I could say user 1 and then in brackets the name like so and set that equal to Mario and this time if I call user one we should see that updated name so we can also use square brackets as well as this dot notation but you might be thinking well why what purpose does this serve well this way of accessing the property is useful when what we're accessing is dynamic and not necessarily set in stone for example let me just clear the console here and let's just create a variable called prop and this is going to be equal to a string called name so this property right here this variable may update at some point it might be email at some point now what we could do is say user one and then just pass in the prop to find out so what it's doing is passing this string right here into this square bracket and it's finding the main property now if later on prop became email then using user one prop like so would get the email so this thing that we're passing in could be dynamic and it could be chosen by the user some way shape or form and then when we try to access it it's going to do it we can't do that by saying user 1 dot prop because that doesn't exist we're looking for here a property on the user called prop and it doesn't exist right here we're passing in a variable so that's why this can be useful sometimes but most of the time you'll probably find yourself using dot notation to grab the properties like so now as well as accessing the different properties and methods on an object we can also create new properties on methods on that object as well for example I could say use a 1 dot age which doesn't exist yet and I could set that equal to 25 and that it's going to create an age property on that user so now if I type out user 1 like so we can see this age property now at the end so I could easily say user 1 age to grab that age property and I could do the same thing for methods as well I could say user 1 dot log info is equal to some kind of function and then inside here we could log something to the console so this is how we add on properties and methods to objects that already exist as well now I'm not a big fan of this I think if an object has a property or method it should be kept inside the object literal definition right here so that we can see everything in one place in my eyes if at some point in my program a user is gonna have an age property I should put that age property in to begin with even if I don't know the value of it I could just set it as null or zero to begin with and then update it later on I don't necessarily like adding on extra properties later but sometimes you may have to and you understand that that's not everyone's of you that's just my view so you can't do it if you want to so this is how we can create objects now have a give access to different properties and methods on them but there's one flaw imagine we have several users here right so we have user 1 user to user 3 etc and they all have these different values for the properties so how would we combat this well yeah what we could do is copy this and paste it down below and say you know user 2 is Yoshi etc and then we could do another one for user 3 like so but this is getting a bit out of control now because what we're doing is we're writing the property names and the functions over and over again for each different object now I want to show you a way we can easily create multiple objects of the same type because they're all a user right all the same type of object they just have different values inside I want to show you how we can easily create multiple instances of this kind of user object without having to rewrite the objects over and over again I'm going to show you that by using a new feature in es6 called classes