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 calculadas son accesores que calculan y devuelven un valor en lugar de simplemente devolver datos almacenados. Se parecen a las propiedades normales, pero calculan su valor sobre la marcha.
Veamos el ejemplo. Tenemos un objeto con una propiedad normal:
const circle = {
radius: 5
};Ahora añadimos una propiedad computed usando un getter:
const circle = {
radius: 5,
get diameter() {
return this.radius * 2;
}
};Así es como accedemos a la propiedad computed:
console.log(circle.diameter); // Salida: 10Si actualizamos el radio, el diámetro también se actualiza automáticamente:
circle.radius = 10;
console.log(circle.diameter); // Salida: 20Las propiedades calculadas 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 propiedades de ancho y alto. Tu tarea es añadir propiedades calculadas para el área y el perímetro.
- Propiedad calculada
<strong>area</strong>- devuelve ancho × alto - Propiedad calculada
<strong>perimeter</strong>- devuelve 2 × (ancho + alto)
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"Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Programación Orientada a Objetos
1Objetos y la palabra clave this
Repaso rápido: ObjetosAgregar métodos a los objetosEntendiendo la palabra clave thisFunciones constructorasLa palabra clave newDesafío de repaso7Herencia y la palabra clave extends
HerenciaLa relación "es-un"La palabra clave extendsEl método super()Heredar propiedades y métodosDesafío de repaso13Composición vs. Herencia
La relación "tiene-un" vs. "es-un"Los límites de la herencia profundaConstrucción de objetos2Organización del código
¿Qué son los módulos?Exportar con exportImportar con importExportaciones por defecto vs. nombradas5Encapsulamiento y Acceso
EncapsulamientoCampos de clase públicos y privadosMétodos privadosDesafío de repaso8Organización del código OOP
Organizar clases en módulos11Proyecto: Un renderizador de figuras
Configuración: Clase Figura y exportaciónHerencia de la clase CírculoSobrescritura y método de áreaContador de figuras estático14Sistema de Gestión de Biblioteca
Diseño de la BibliotecaClase Libro con ComposiciónValidación del Autor del Libro9Métodos y propiedades estáticos
Nivel de clase vs. Nivel de instanciaPropiedades estáticasMétodos de utilidad estáticosDesafío de repaso12Getters y Setters
Las palabras clave get y setPropiedades computadasValidación y efectos secundariosDesafío de repasoPractica por tu cuenta: Compilador de JavaScript online