JavaScript Getters and Setters Explained

hey everyone I'm back with another horrible YouTube thumbnail um they seem to be working so I I'm sorry I have to keep doing them uh we're talking about JavaScript Getters and Setters a lovely piece of syntax and JavaScript uh let's go ahead and get started so I've got a very simple class here this is kind of the classic example used to show Getters and Setters it's a person class each person has a first name and a last name property and then I have a full name method because I commonly want the full name which is just first with a space and then last um this works just fine right I have my actor that I've established down here new person first name is Brendan last name is Frasier I can access let's just do a console.log actor dot full name of course I call it with parentheses it is a method and we see Brendan space Frazier printed out but this method here is basically acting as it's a computed property it's taking two pieces of information Dynamic values smooshing them together with the space it might be nice if I could call it as a property if it looked like a property but it was really a method that is what a getter allows us to do using the get keyword we put that in front of some method name this will establish a property on our person instances called full name and when we access that property it will execute this method so we get the functionality of a method with the appearance of a property if I save this right now I'm going to get an error because now JavaScript says full name is not a function I'm calling it like it is client like it is yeah I always call it like it is uh so I'm going to get rid of those parentheses actor dot full name looks like a property behind the scenes it's calling this method and we see Brendan space Frazier if I were to change actor DOT first to be something else like my name now we get cult space Fraser when we print out actor.full name so this is dynamic right it is a computed property it looks like a property but it's calling this method whenever we access this full name property don't use parentheses that's the whole idea so we can also use the set keyword not get but set to define a Setter method now this is something that will look like a property it will be a property that executes a Setter method when we access that property and set it to a new value so in other words I could do something like this actor dot full name equals and then let's pick some actor like I was going to say Timothy chalamet but I don't know how you spell his first name chalamet last name let's just say that's it I'm sorry I think there's an accent in there somewhere but let's say that is uh how you spell his name what I want this to do is set first name to be Timothy and last name to be chalamet so basically I can set up something that will look like a property it will behave like a property when I call it I don't use parentheses I can set it equal to something but then behind the scenes it will call some function that will do some fancy logic to update first and last so this isn't necessarily something you need to do in this situation because normally you probably would just change first name and last name individually but just for the sake of showing you how this works will provide some argument in here or some parameter rather we'll just call this new name new name will be set to Timothy chalamet or it will be set to whatever I provide on the right hand side of the equal sign so then in here I could start with just some super simple logic that I don't know you tried to change name change full name and I'll console.log new name so now whenever I try and set full name you'll see that this function is called it says you tried to change full name and then it also prints out the value of new name so we have access to new name in here and I can do some fancy logic it's not very fancy but if I wanted to get the first name I would split on the space right new name dot splits on a space and then that will return to me an array if I just print that out for you it has two elements so then I'll probably just destructure let's just do something like const first and last equals that and then I'll just set this DOT first equals first this dot last equals last and now I have updated the actual instance of person so if I were to look at this DOT first in this dot last after the fact let's just go over here actor DOT first is now Timothy hopefully spelled correctly although I don't know actor.last is chalamet if I were to update let's say actor dot full name is now actually equal to uh I don't know how about uh I have no idea how you say her name source source a Ronan great actress and lots of good movies but another one that I'm not sure if I'm spelling correctly or even saying correctly but it works if we look at actor.first now it's set to shirt and I am butchering that an actor.last is ronin now this is maybe overkill for what we need here again there's no problem with just setting first and last separately but what is nice is that I could add in some logic some error checking some validations to make sure that you're not setting first and last name to be empty for example so by using a Setter I can insert some additional logic in the same way that if I just defined a method called full name I could write whatever logic I want in there but again this is behaving like it is not a method it's behaving like it's a single little property but it's calling a method behind the scenes so I could add some logic in here that does something like if not new name like if you don't provide one we'll throw an error throw boo name cannot be blank just like that and now if you try and set actor dot full name equal to an empty string we get an error so now the question is well my question at least is why or when should we use these should we use Getters for everything that we ever Define on an object or a class and by the way you can use these just on regular old you know object literals doesn't have to be a class but why or when should we use them the answer is you probably don't need to use them all the time I wouldn't in fact one thing I haven't shown is that you cannot have a getter that has the same name as an existing property so I couldn't set up a getter like get first and then in here console.log ha ha ha like that because I'm going to get an error it says you cannot set property first uh blah blah blah blah basically it's telling me first already exists on this object we can't have a getter with the same name but what I could use a getter for is if I have any logic I want to run every time you access a property so maybe I want to do something like I don't know this dot count and have it start at zero this is silly but every time somebody access his full name I want to increment this dot count I don't know why it's stupid in this case but maybe that's something I want to do well now every time I go to look at the full name which looks like a property oh my goodness not like that every time I access it let's do it twice we look at count that's been incremented four times because I accessed it two times earlier when I ran this file so that's something we can only do when we are using a getter I mean you could do it with a method but you couldn't do it with just a regular old property right we're inserting some logic every time you access dot full name another reason is for simplicity's sake if you have some computed property that just looks it behaves like a property you want it to look like a property then use get and just like with Getters by defining a Setter I can run some additional logic let's say there's some side effect or something I want to happen every time you set a property so that's it for get in set just remember you cannot use a name that is already existing as a property in an object as a getter or Setter you have to have unique names you can have a getter and Setter of the same name that's really common but I couldn't have get first if I already have this DOT first as a property okay thanks for watching everyone if literally anybody made it to this point I feel like most people watch two to three minutes and then just skip around but if you're here I hope you enjoyed it consider subscribing liking all that stuff and I'll be back next week with another video on something JavaScript D reacting node typescript something like that all right see you then

Channel: Colt Steele

Views: 20,142

Keywords:

Id: qkAb-4ZR5Yw

Length: 9min 11sec (551 seconds)

Published: Tue Sep 27 2022