Tak jak zawsze, rozpocznijmy od przykładu:
let course = {
name: 'Podstawy JavaScript',
price: 50,
currency: 'PLN'
};
Jeżeli chciałbyś wyświetlić informacje o cenie dla tego kursu wraz z jego walutą, musiałbyś użyć mniej więcej takiej składni:console.log(`Cena: ${course.price} ${course.currency}`); //Cena: 50 PLN
Przyznasz, że nie jest to zbyt wygodne i pewnie wolałbyś, aby jakaś metoda w klasie zwracała takie informacje.let course = {
name: 'Podstawy JavaScript',
price: 50,
currency: 'PLN',
priceInfo() {
return `Cena: ${course.price} ${course.currency}`;
}
};
console.log(course.priceInfo()); //Cena: 50 PLN
Niby wszystko ok, ale taki zapis ma kilka wad. Po pierwsze musisz się odwoływać do priceInfo() tak jak do metody, czyli dodając nawiasy po nazwie. Poza tym jest ona tylko do odczytu, to znaczy nie można przypisać z zewnątrz wartości do priceInfo(). Aby uniknąć tych wad, możesz użyć właśnie gettera i settera. Get, używasz do pobierania wartości, a set do przypisania wartości. Przerobienie obecnej metody na get i set jest bardzo proste. Zobacz:
let course = {
name: 'Podstawy JavaScript',
price: 50,
currency: 'PLN',
get priceInfo() {
return `Cena: ${course.price} ${course.currency}`;
},
set priceInfo(value) {
let values = value.split(' ');
this.price = values[0];
this.currency = values[1];
}
};
console.log(course.priceInfo); //Cena: 50 PLN
course.priceInfo = '20 USD';
console.log(course.priceInfo); //Cena: 20 USD
Jak widzisz chcąc zmienić metodę na get, wystarczy dopisać przed nazwą słowo get, dzięki takiemu zapisowi możesz pobierać wartość z metody, odwołując się tak jak do zwykłych zmiennych, to znaczy bez podawania nawiasów po nazwie.console.log(course.priceInfo); // Cena: 50 PLN
Aby móc przypisywać wartości, musisz dodać kolejną metodę, poprzedzając ją słowem set oraz w nawiasie przyjmować wartość.set priceInfo(value) {
//...
}
course.priceInfo = '20 USD';
Jak widzisz, dzięki takiemu zapisowi możesz przypisać wartość setterowi. W powyższym przypadku argumentem czyli value jest wartość "20 USD".To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.
Poprzedni artykuł - Parametry domyślne w JavaScript.
Następny artykuł - Algorytm FizzBuzz w JavaScript.