JavaScript Getters and Setters | Mosh

in this lecture we're going to look at a special kind of methods in objects called getters and setters so let's imagine we have a person object with two properties first name set this to marche and last name set this to a Madani now somewhere in our application we want to display a person's full name so we have to do something like this consult a lot we can either get the person that first name concatenated with space and then last name or a better way as I told you before is to use a template literal so we use the back tick and then we add a couple of arguments here so here's the first one the argument is person that first name now we have a space and here is the second argument person dot last name however the problem with this approach is that maybe there are multiple places in our application where we want to display someone's full name with the current implementation we'll have to repeat this template literal in multiple places a better approach is to define a method in this object call it full name and move this expression right there and then whenever we want to display a person's full name we simply call that method so we can add another key value pair full name but we set the value to a function or as I told you before in es6 we have a shorter syntax to add a method to an object so instead of adding it as a key value pair we can add it as a function without the function keyword so if you want to define a function outside of an object what do we do we add function the name of the function parentheses and curly braces however when we need to add this inside of an object we just drop the function keyword so you can see this new syntax is shorter and cleaner than the older syntax okay so here's our full-name method we simply return this expression here so I'm gonna cut this and move it here now with this new implementation every time we need to by someone spooling would simply call person dot full name save the changes we get Marsh comma daddy beautiful however there are a couple of problems with this approach the first problem is that this is read only in other words we cannot set a person's full name from the outside it would be nice if we could do this and then the first name and last name properties would be automatically set based on what we pass here the other issue is that I don't like to call this like a method it would be nicer if you could treat this as a property so we could drop the parentheses like this so how do we do this well that's where getters and setters come in the picture we use getters to access properties in an object and setters to change or mutate them so in this object we should add a getter and with that Gator we can read this person's full name like a property and with the setter we can set it from the outside so here is how it works we prefix this method with a get keyword and now this method is a getter so we can access the full name like a property on line 15 let me temporarily comment out this line save the changes you can see our program is still working beautiful so this is our getter now to be able to set this from the outside we need to add a setter a setter is very similar so we add the set keyword the name of the property or method and then code block however this method needs a parameter we can call it value or anything and the value of this parameter would be what we have on the right side of the assignment operator so here let's assume that value is a valid string we need to split that string by a space take the parts and set the first name and last name properties so value we call the split method of strings you want to split it by a space this will return an array we can call that parts now we can set the first name two parts of zero a last name two part of one and finally instead of logging the person's full name let's just log the person object so initially we set the first name and last name to Muhammad Ani now with this new property which is actually a setter we're changing the name to John Smith save the changes here's our personal object you can see first name and last name properties are updated also note that full name its value is dot dot dot sometimes when you're logging objects in the console you may see properties with this kind of value as we can see from the tooltip this is a getter in order to read the manual you need to click here and now this method is executed and the result is returned in the console so this is the benefit of getters and setters in the next lecture we're going to look at error handling hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and enroll

Channel: Programming with Mosh

Views: 148,361

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, object, getter, setter, programming with mosh, code with mosh

Id: bl98dm7vJt0

Length: 6min 37sec (397 seconds)

Published: Tue May 15 2018