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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:

JavaScript Setter (The set Keyword):
Example: This example describes the use of lang() property to set the value of language property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.