Вычисляемые свойства

Часть раздела Объектно-ориентированное программирование путешествия по JavaScript на Coddy — урок 44 из 56.

Вычисляемые свойства — это геттеры, которые вычисляют и возвращают значение вместо того, чтобы просто возвращать сохраненные данные. Они выглядят как обычные свойства, но вычисляют свое значение «на лету».

Давайте рассмотрим пример. У нас есть объект с обычным свойством:

const circle = {
  radius: 5
};

Теперь мы добавим вычисляемое свойство, используя геттер:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

Вот как мы обращаемся к вычисляемому свойству:

console.log(circle.diameter); // Выводит: 10

Если мы обновим радиус, диаметр также обновится автоматически:

circle.radius = 10;
console.log(circle.diameter); // Выводит: 20

Вычисляемые свойства полезны, когда значение свойства зависит от других свойств или требует вычисления.

Задание

Вам дан класс Rectangle со свойствами width и height. Ваша задача — добавить вычисляемые свойства для area и perimeter.

Вычисляемое свойство <strong>area</strong> — возвращает width × height
Вычисляемое свойство <strong>perimeter</strong> — возвращает 2 × (width + height)

Шпаргалка

Вычисляемые свойства — это геттеры, которые вычисляют и возвращают значение вместо того, чтобы просто возвращать сохраненные данные. Они вычисляют свое значение «на лету».

Определите вычисляемое свойство, используя ключевое слово get:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

Обращайтесь к вычисляемым свойствам как к обычным свойствам (без круглых скобок):

console.log(circle.diameter); // Вывод: 10

Вычисляемые свойства автоматически обновляются при изменении свойств, от которых они зависят:

circle.radius = 10;
console.log(circle.diameter); // Вывод: 20

Попробуйте сами

import { Rectangle } from './rectangle.js';

// Тестовый код — не изменять
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // Должно вывести "Area: 50"
console.log(`Perimeter: ${rect.perimeter}`); // Должно вывести "Perimeter: 30"