ACCESS TO JAVASCRIPT OBJECTS

ECMAScript 5 (ES5 2009) introduced Getter and Setter.

They allow you to define access objects (calculated properties).

THE KEYWORD GET

This example uses a lang property to get the value of the language property.

// Create an object:
const person = ;

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

THE KEYWORD SET

This example uses a lang property to set the value of the language property.

const person = ;

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

FUNCTION OR GETTER?

const person = ;

// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();

const person = ;

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

The second example provides simpler syntax.

WHY USE GETTER AND SETTER?

It gives simpler syntax
It allows equal syntax for properties and methods
It can secure better data quality
It is useful for doing things behind-the-scenes

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>GETTER AND SETTER</title>
</head>
<body>
    <script>    
        /*--Il metodo Object.defineProperty() può essere utilizzato 
            anche per aggiungere Getter e Setter:*/
            
        // Define object
        const obj = {counter : 0};

// Define setters
        Object.defineProperty(obj, "reset", {
        get : function () {this.counter = 0;}
        });
        Object.defineProperty(obj, "increment", {
        get : function () {this.counter++;}
        });
        Object.defineProperty(obj, "decrement", {
        get : function () {this.counter--;}
        });
        Object.defineProperty(obj, "add", {
        set : function (value) {this.counter += value;}
        });
        Object.defineProperty(obj, "subtract", {
        set : function (value) {this.counter -= value;}
        });

// Play with the counter:
        obj.reset;
        obj.add = 15;
        obj.subtract = 10;
        obj.increment;
        obj.decrement;
        console.log(obj.counter);
    </script>
</body>
</html>

LINKS TO JAVASCRIPT

JAVASCRIPT

LINK TO THE CODE ON GITHUB

GITHUB