JavaScript | Object Accessors - GeeksforGeeks

12 Mar, 2019
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>                    
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>                    
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>                    
Output:
javascript-object
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?