JavaScript Classes | Getter & Setter Methods In JavaScript explained with Examples

in this video we will learn about JavaScript class classes are one of the feature introduced in es6 version of JavaScript JavaScript class is a template for creating objects to create a class we use class keyword then we write the name of the class within the class we create one Constructor method you should always add a method with the name Constructor within the class the first letter of the class name should be in capital letter JavaScript class is similar to the JavaScript Constructor function to create a Constructor function in JavaScript we used to write function and name of the function I'm adding person in this function We'll add here we will add the code to initialize the property value of an object foreign function we create object we can write any object name person one new keyword and Constructor function and pass two values here so this is for creating one new object to display the object created using this Constructor function we used to write console.log person one you can see the output in this console tab it is displaying one object with the property name and age now we can create the object using class also so now let's create the class to create a class we used to write class keyword then class name I'm adding the class name person and in this class name we have to add one Constructor method and this Constructor method is used to initialize the value of the object so let me add this here we will add two parameters [Applause] class with the name person and this line will create one object with this class now let's duplicate it we'll create another object with the name Person 2 and we will pass another value okay so we have two objects person one and person two now if you want to display the object in console tab you can write console.log and you can see the output it is displaying here one object with two properties name and age and the name is Elon Musk and age is 52. now let's print second object which is person two you can see the output in the console tab it is displaying another object with the name Bill Gates and age 67. this Constructor method initialized the property of the object JavaScript automatically calls the Constructor method when you create an object using the class now let's learn about JavaScript class methods we can add any number of methods in JavaScript class so let me remove this second person and in this class after this Constructor we can add any method so let's add one method with the name great and this grid method will return text hello this dot name it will return hello and name of the person now I want to display this person one object so here I will add console.log person one and in the console tab you can see one object with two properties name Elon Musk is 52 now let's expand it and here you can see prototype and in this prototype you can see this grid method in this prototype of the object so we can call this great method from this person one object so in this console.log I will add great and you can see the output it is displaying hello Elon Musk because we are calling the grid method from the object and this grid method is returning the text hello and the name so that's why it is displaying hello Elon Musk we can add any number of methods so let's add another method here here I will add a new method change name this change name method will update the name of the person in the object so here we'll add new name and then this dot name is equal to new name so in this method we are adding one parameter so when we will call this method we have to pass one argument let me remove this console.log and here I will call the change name method on person one object so just add person one Dot change name and we have to pass one argument so let's add a new name I will add my name here Avinash now we can print the object let's add console.log person one you can see one object name Avinash is 52. now if you want to print the name only here we'll add person one dot name it is printing the name in the console tab so in the JavaScript class you can add any number of method now let's learn about Getters and Setters in JavaScript Getters and seters are special methods in JavaScript that allow you to control how properties are accessed and modified they are defined using git and set keyword now let's understand the getter method a getter is a method that is called when a property is accessed it can be used to do things like validate the value of property or convert it into different format so let's see this example here we have one class with only one method grid and this method is returning hello and the name here we have created one object using this class this code will call the grid method from the person one object and display the return value in the console so while calling this great method we used to write this parenthesis but when we declare it as a getter method so here we will add get space and the method name that's it just add the get keyword and after that here you don't need to write the parenthesis simply add Great person1 Dot grid and save the changes you can see the output it is still displaying the message hello Elon Musk so we have just added this get keyword in front of this method name and we can call it directly without adding parenthesis now let's understand the setter method with one example here we will change the method I will add change name new name this dot name is equal to new name to call this method we need to write person 1 Dot change name and pass one argument like this but here we will add set keyword in front of this method just add set then we don't need to write this parenthesis and pass the argument simply we will add person 1 Dot certain method name and assign one value using assignment operator like this and see the output here I am displaying the person one object it is displaying one object and name is Avinash is 52 like this so we add this set keyword to Define one Setter method we can call this method on object and assign one value with assignment operator a Setter is a method that is called when a property is modified it can be used to do things like update the value of the property or perform some other action we can use the same method as getter and Setter let's see one example let me change the method name it will be person name and here I am adding set now we will add get this will be getter method and I am adding the method name same as the setter method here also person name and this will return return this Dot name foreign so you can see here we have declared one class in this class we have one Setter method and one getter method and both method name is same person name and person name now to call this getter method we will simply add console.log person1 Dot person name so it will return the name of the person you can see the output it is displaying the name now we can update the name using this Setter method so let's add person one dot person name and just assign one value after that again we will call this getter method that will display the name so you can see the output first it is displaying the name Elon and after that it is displaying the name Avinash so we have the same method name as getter and setter to call the getter method we are simply adding the object name and Method name and to call this Setter method we are adding object name and Method name and assigning one value that's it when we assign any value it will call the setter method and update the properties value let's learn about JavaScript class expression a class expression provides you an alternative way to define a new class it is similar to a function expression but it uses the class keyword instead of the function keyword class expression can be named or unnamed if they are named the name can be used to refer the class later if they are unnamed they can only be referred by the variable that they are assigned to so let's define one class expression we will add the class keyword in this class we'll declare one Constructor method this Constructor method will initialize the object property property name is name here we will add name and in this class we will add one method method name is get name it will return the name now we will assign this class in a variable let's add it let keyword person is equal to class a class expression does not require an identifier after the class keyword you can use a class expression in a variable declaration now we can create an object so let's add const person 1 new person we can refer this class with this variable and here we'll add one argument [Applause] now we can display our object in the console tab so let's add console.log person one you can see the output in this console here we have one object with the name Elon Musk so this was the class expression in JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel great stack to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 7,531

Keywords: JavaScript Classes, Classes In JavaScript, JavaScript Class Methods, Getters and Setters Method, Getter Method in JavaScript, Stetter Method in JavaScript, JavaScript Class Expressions, getter and setter in javascript, getter and setter method in javascript, setter and getter method in javascript, getter setter javascript, advanced javascript, GreatStack, coding, javascript tutorial for beginners, javascript, javascript full course

Id: gMEaH4VLAlw

Length: 15min 33sec (933 seconds)

Published: Fri Aug 25 2023