Геттери та сеттери

JavaScriptJunior~1 хв читання

1. Приклад простого геттера і сеттера

javascript

class User {
  constructor(name) {
    this._name = name; // "приватна" властивість (за домовленістю)
  }

  get name() {
    console.log("Геттер викликано");
    return this._name;
  }

  set name(value) {
    console.log("Сеттер викликано");
    if (value.length < 2) throw new Error("Ім'я закоротке");
    this._name = value;
  }
}

const u = new User("Alice");

console.log(u.name); // Геттер викликано → "Alice"
u.name = "Alex";     // Сеттер викликано
console.log(u.name); // "Alex"

Тут:

get name() викликається під час доступу до властивості u.name;
set name(value) викликається під час присвоєння u.name = "...";
усередині них можна виконувати перевірки, обчислення тощо.

2. Як це працює

Під капотом get і set, це спеціальні дескриптори властивостей, визначені через Object.defineProperty.

Тобто ці методи не зберігають значення, а керують ним:

javascript

u.name;      // → викликає get name()
u.name = x;  // → викликає set name(x)

3. Геттер без сеттера (лише для читання)

Якщо визначено лише геттер, властивість стає лише для читання:

javascript

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

const c = new Circle(10);
console.log(c.area); // 314.159...
c.area = 100;        // Нічого не станеться (немає сеттера)

Геттери часто використовують для обчислюваних властивостей (наприклад, area, fullName, priceWithTax тощо).

4. Сеттер без геттера (лише запис)

Якщо потрібно реагувати лише на зміну, можна створити сеттер без геттера:

javascript

class Temperature {
  set celsius(value) {
    this.fahrenheit = value * 1.8 + 32;
  }
}

const t = new Temperature();
t.celsius = 25;
console.log(t.fahrenheit); // 77

Це зручно, якщо потрібно "оновлювати" внутрішні дані під час запису.

5. Можна використовувати з приватними полями

javascript

class Account {
  #balance = 0;

  get balance() {
    return this.#balance;
  }

  set balance(value) {
    if (value < 0) throw new Error("Balance cannot be negative");
    this.#balance = value;
  }
}

const acc = new Account();
acc.balance = 100;
console.log(acc.balance); // 100

Тут приватна властивість #balance захищена, а керування відбувається через геттер/сеттер.

6. Можна обчислювати значення на льоту

javascript

class User {
  constructor(first, last) {
    this.first = first;
    this.last = last;
  }

  get fullName() {
    return `${this.first} ${this.last}`;
  }

  set fullName(value) {
    const [first, last] = value.split(" ");
    this.first = first;
    this.last = last;
  }
}

const u = new User("Alice", "Fisher");
console.log(u.fullName); // "Alice Fisher"

u.fullName = "Alex Smith";
console.log(u.first); // "Alex"
console.log(u.last);  // "Smith"

Тут властивість fullName виглядає як звичайне поле, але насправді викликає методи get і set.

7. Можна використовувати з `Object.defineProperty()`

Геттери та сеттери можна задати вручну (поза класом):

javascript

const user = {
  _name: "Alice"
};

Object.defineProperty(user, "name", {
  get() {
    return this._name.toUpperCase();
  },
  set(value) {
    this._name = value.trim();
  }
});

user.name = "  alex  ";
console.log(user.name); // "ALEX"

Це той самий механізм, який клас використовує під капотом.

Порівняння зі звичайними властивостями

Особливість	Звичайна властивість	Геттер/сеттер
Зберігає значення	Так	Ні
Викликається як функція	Ні	Автоматично
Можна додати логіку	Ні	Так
Підтримка приватних полів	Так	Так
Виглядає як звичайна властивість	Так	Так

Коротко

Геттери (get) і сеттери (set), це "розумні властивості" класу, які дають змогу контролювати читання і запис даних.

Вони:

виглядають як звичайні поля;

дозволяють робити валідацію, обчислення та логіку;

працюють і з приватними властивостями;

не потребують додаткових дужок під час виклику.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.