Propriedades Computadas

Parte da seção Programação Orientada a Objetos do Journey de JavaScript da Coddy — lição 44 de 56.

Propriedades computadas são getters que calculam e retornam um valor em vez de apenas retornar dados armazenados. Elas se parecem com propriedades comuns, mas calculam seu valor dinamicamente.

Vamos dar uma olhada no exemplo. Temos um objeto com uma propriedade comum:

const circle = {
  radius: 5
};

Agora adicionamos uma propriedade computada usando um getter:

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

É assim que acessamos a propriedade computada:

console.log(circle.diameter); // Saída: 10

Se atualizarmos o raio, o diâmetro também será atualizado automaticamente:

circle.radius = 10;
console.log(circle.diameter); // Saída: 20

Propriedades computadas são úteis quando o valor de uma propriedade depende de outras propriedades ou requer cálculo.

Desafio

Você recebeu uma classe Rectangle com as propriedades width e height. Sua tarefa é adicionar propriedades computadas para area e perimeter.

Propriedade computada <strong>area</strong> - retorna width × height
Propriedade computada <strong>perimeter</strong> - retorna 2 × (width + height)

Folha de consulta

Propriedades computadas são getters que calculam e retornam um valor em vez de apenas retornar dados armazenados. Elas computam seu valor dinamicamente.

Defina uma propriedade computada usando a palavra-chave get:

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

Acesse propriedades computadas como propriedades regulares (sem parênteses):

console.log(circle.diameter); // Saída: 10

Propriedades computadas são atualizadas automaticamente quando suas propriedades dependentes mudam:

circle.radius = 10;
console.log(circle.diameter); // Saída: 20

Experimente você mesmo

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

// Código de teste - não modifique
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // Deve exibir "Area: 50"
console.log(`Perimeter: ${rect.perimeter}`); // Deve exibir "Perimeter: 30"