MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Setters and Getters

Setters and getters are object properties that call a function when they are set/gotten.


Defining a Setter/Getter Using Object.defineProperty


var setValue;
var obj = {};
Object.defineProperty(obj, "objProperty", {
 get: function(){
 return "a value";
 },
 set: function(value){
 setValue = value;
 }
});

Defining an Setter/Getter in a Newly Created Object

JavaScript allows us to define getters and setters in the object literal syntax. Here's an example:


var date = {
 year: '2017',
 month: '02',
 day: '27',
 get date() {
 // Get the date in YYYY-MM-DD format
 return `${this.year}-${this.month}-${this.day}`
 },
 set date(dateString) {
 // Set the date from a YYYY-MM-DD formatted string
 var dateRegExp = /(\d{4})-(\d{2})-(\d{2})/;

 // Check that the string is correctly formatted
 if (dateRegExp.test(dateString)) {
 var parsedDate = dateRegExp.exec(dateString);
 this.year = parsedDate[1];
 this.month = parsedDate[2];
 this.day = parsedDate[3];
 }
 else {
 throw new Error('Date string must be in YYYY-MM-DD format');
 }
 }
};

Accessing the date.date property would return the value 2017-02-27. Setting date.date = '2018-01-02 would call
the setter function, which would then parse the string and set date.year = '2018', date.month = '01', and
date.day = '02'. Trying to pass an incorrectly formatted string (such as "hello") would throw an error.


Defining getters and setters


class Person {
 constructor(firstname, lastname) {
this._firstname = firstname;
 this._lastname = lastname;
 }
 get firstname() {
 return this._firstname;
 }
 set firstname(name) {
 this._firstname = name;
 }
 get lastname() {
 return this._lastname;
 }
 set lastname(name) {
 this._lastname = name;
 }
}
let person = new Person('John', 'Doe');
console.log(person.firstname, person.lastname);
person.firstname = 'Foo';
person.lastname = 'Bar';
console.log(person.firstname, person.lastname); 

Output

John Doe
Foo Bar


Conclusion

In this page (written and validated by ) you learned about Javascript Setters and Getters . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Events.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.