Propriétés calculées

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy — leçon 44 sur 56.

Les propriétés calculées sont des accesseurs (getters) qui calculent et retournent une valeur au lieu de simplement retourner des données stockées. Elles ressemblent à des propriétés classiques mais calculent leur valeur à la volée.

Jetons un coup d'œil à l'exemple. Nous avons un objet avec une propriété régulière :

const circle = {
  radius: 5
};

Maintenant, nous ajoutons une propriété calculée en utilisant un getter :

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

Voici comment nous accédons à la propriété calculée :

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

Si nous mettons à jour le rayon, le diamètre se met également à jour automatiquement :

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

Les propriétés calculées sont utiles lorsque la valeur d'une propriété dépend d'autres propriétés ou nécessite un calcul.

Défi

On vous donne une classe Rectangle avec les propriétés width et height. Votre tâche consiste à ajouter des propriétés calculées pour area et perimeter.

Propriété calculée <strong>area</strong> - retourne width × height
Propriété calculée <strong>perimeter</strong> - retourne 2 × (width + height)

Aide-mémoire

Les propriétés calculées sont des getters qui calculent et retournent une valeur au lieu de simplement retourner des données stockées. Elles calculent leur valeur à la volée.

Définissez une propriété calculée en utilisant le mot-clé get :

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

Accédez aux propriétés calculées comme à des propriétés régulières (sans parenthèses) :

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

Les propriétés calculées se mettent à jour automatiquement lorsque leurs propriétés dépendantes changent :

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

Essayez vous-même

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

// Code de test - ne pas modifier
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // Devrait afficher "Area: 50"
console.log(`Perimeter: ${rect.perimeter}`); // Devrait afficher "Perimeter: 30"