Settery i gettery

Zachowanie przy dostępie lub ustawianiu właściwości w obiekcie możesz zmieniać przy pomocy getterów i setterów.

Get

Słowo kluczowe get pozwala zmienić zachowanie przy pobieraniu wartości właściwości.

Przykład 1

class Person {
    constructor(name, surname) {
        this.name = name;
        this.surname = surname;
    }
    
    get fullname() {
        return `${this.name} ${this.surname}`;
    }
}

const john = new Person('John', 'Dee');
console.log(john.fullname); // John Dee

Set

Analogicznie można zmienić sposób zachowania przy ustawianiu wartości.

Przykład 2

class Person {
    constructor(name, surname) {
        this.name = name;
        this.surname = surname;
    }
    
    get fullname() {
        return `${this.name} ${this.surname}`;
    }
    
    set fullname(value) {
        const data = value.split(" ");
        this.name = data[0];
        this.surname = data[1];
    } 
}

const john = new Person('John', 'Dee');
john.fullname = "Annie Stark";
console.log(john.fullname); // Annie Stark

Ćwiczenia

Ćwiczenie 1 - Przygotuj klasę, która reprezentować będzie artykuł. W momencie wyciągania treści artykułu zwróć go jako ciąg znaków osadzony wewnątrz tagów <p></p> np.

const article = new Article('Lorem ipsum dolor sit amet.');
console.log(article.content); // <p>Lorem ipsum dolor sit amet.</p>

Ćwiczenie 2 - Przygotuj klasę FormData, która przy przypisaniu wartości do email sprawdzi czy zawiera on znak @, część hosta i użytkownika. W przypadku gdy email będzie niepoprawny rzuć błąd.

const form = new FormData();
form.email = 'john'; // Error
form.email = '[email protected]'; // Error
form.email = '[email protected]';