Propiedades computadas

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy — lección 44 de 56.

Las propiedades computadas son getters que calculan y devuelven un valor en lugar de simplemente devolver datos almacenados. Se ven como propiedades regulares pero calculan su valor sobre la marcha.

Echemos un vistazo al ejemplo. Tenemos un objeto con una propiedad regular:

const circle = {
  radius: 5
};

Ahora añadimos una propiedad computada usando un getter:

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

Así es como accedemos a la propiedad computada:

console.log(circle.diameter); // Resultado: 10

Si actualizamos el radio, el diámetro también se actualiza automáticamente:

circle.radius = 10;
console.log(circle.diameter); // Salida: 20

Las propiedades computadas son útiles cuando el valor de una propiedad depende de otras propiedades o requiere un cálculo.

Desafío

Se te proporciona una clase Rectangle con las propiedades width y height. Tu tarea es añadir propiedades computadas para area y perimeter.

Propiedad computada <strong>area</strong> - devuelve width × height
Propiedad computada <strong>perimeter</strong> - devuelve 2 × (width + height)

Hoja de referencia

Las propiedades computadas son getters que calculan y devuelven un valor en lugar de simplemente devolver datos almacenados. Calculan su valor sobre la marcha.

Define una propiedad computada utilizando la palabra clave get:

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

Accede a las propiedades computadas como propiedades normales (sin paréntesis):

console.log(circle.diameter); // Salida: 10

Las propiedades computadas se actualizan automáticamente cuando cambian sus propiedades dependientes:

circle.radius = 10;
console.log(circle.diameter); // Salida: 20

Pruébalo tú mismo

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

// Código de prueba - no modificar
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // Debería mostrar "Area: 50"
console.log(`Perimeter: ${rect.perimeter}`); // Debería mostrar "Perimeter: 30"