JavaScript | Object Accessors
There are two keywords which define the accessors functions: a getter and setter for the fullName property. When the property is accessed, the return value from the getter is used. When a value is set, the setter is called and passed the value that was set.
JavaScript Getter (The get Keyword):
Example: This example describes the use of lang() property to get the value of language property.
<!DOCTYPE html> <html> <head> <title> JavaScript Getter </title> </head> <body style="text-align:center;"> <div style="background-color: green;"> <h1> Welcome to GeeksforGeeks!. </h1> <h2> JavaScript Getters </h2> <p id="GFG"></p> </div> <script> // Create an object: var person = { name: "geeksforgeeks", get lang() { return this.name; } }; // Display data from the object using a getter document.getElementById("GFG").innerHTML = person.name; </script> </body> </html> |
chevron_right
filter_none
Output:
JavaScript Setter (The set Keyword):
Example: This example describes the use of lang() property to set the value of language property.
<!DOCTYPE html> <html> <head> <title> JavaScript Getter </title> </head> <body style="text-align:center;"> <div style="background-color: green;"> <h1> Welcome to GeeksforGeeks!. </h1> <h2> JavaScript Getters </h2> <p id="GFG"></p> </div> <script> // Create an object: var person = { name: "geeksforgeeks", set lang(value) { return this.name; } }; // Display data from the object using a getter document.getElementById("GFG").innerHTML = person.name; </script> </body> </html> |
chevron_right
filter_none
Output:
Note: Getters and Setters are not supported in Internet Explorer 8.
Reasons to use Getters and Setters:
- The syntax for properties and methods are equal.
- Used for doing things behind-the-scenes.
- They can secure better data quality.
- The syntax of this are simpler.
Data Quality: The Getters and Setters are used to securing better data quality.
In the given example below, using the lang property, the lower case value of the language is returned.
Example: This example use lang property and it returns the lower case value of the language.
<!DOCTYPE html> <html> <head> <title> Data Quality </title> </head> <body style="text-align:center;"> <div style="background-color: green;"> <h1>Geeksforgeeks !!</h1> <b> Data Quality : lower case value is returned </b> <p id="GFG"></p> </div> <script> var person = { language : "Geeksforgeeks", get lang() { return this.language.toLowerCase(); } }; // Display data from the object using a getter document.getElementById("GFG").innerHTML = person.lang; </script> </body> </html> |
chevron_right
filter_none
Output:
Recommended Posts:
- How to access an object having spaces in the object's key using JavaScript ?
- How to check a JavaScript Object is a DOM Object ?
- Overriding Accessors and Mutators in Scala
- How to get a key in a JavaScript object by its value ?
- Map vs Object in JavaScript
- How to get the first key name of a JavaScript object ?
- Object.is( ) in JavaScript
- Object.create( ) In JavaScript
- Object.seal( ) In JavaScript
- How to iterate over a JavaScript object ?
- JavaScript | Object Constructors
- Object.entries() In JavaScript
- JavaScript | Object Methods
- JavaScript | Set object key by variable
- JavaScript | Object Prototypes
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
