Menu
CoddyTech

Validation et effets de bord

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy. Leçon 45 sur 56.

Les accesseurs et les mutateurs peuvent faire plus que simplement lire et écrire des propriétés : ils peuvent valider les entrées et déclencher des effets secondaires lorsque les valeurs changent.

Créons une classe User avec validation :

class User {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
  get age() {
    return this._age;
  }
  set age(value) {
    // Vérifier que l’âge est un nombre compris dans une plage raisonnable
    if (typeof value !== 'number') {
      throw new Error('Age must be a number');
    }
    if (value < 0 || value > 120) {
      throw new Error('Age must be between 0 and 120');
    }
    this._age = value;
    // Effet secondaire : journaliser les changements d’âge
    console.log(`Age updated to ${value}`);
  }
}

Désormais, lorsque nous utilisons le setter, la validation se fait automatiquement :

const user = new User('Alice', 25);
// Cela fonctionne
user.age = 30;  // Affiche dans les logs : "Age updated to 30"
// Cela déclenche une erreur
user.age = -5;  // Erreur : l’âge doit être compris entre 0 et 120
// Cela déclenche aussi une erreur
user.age = "thirty";  // Erreur : l’âge doit être un nombre

Validation = Vérifier si une valeur est valide avant de la stocker
Effets secondaires = Actions supplémentaires qui se produisent lorsqu’une propriété change

challenge icon

Défi

On te donne une classe BankAccount avec un accesseur de définition simple. Ta tâche consiste à compléter l’accesseur de définition balance.

Ajoute à l’accesseur de définition :

  1. Validation : Vérifie si value n’est pas un nombre OU est inférieur à 0 ; si c’est le cas, console.log("Invalid balance") et utilise return pour quitter l’accesseur de définition
  2. Effet secondaire : Après avoir stocké une valeur valide, console.log(\`Balance updated to $${value}\`)

Essayez vous-même

import { BankAccount } from './account.js';

// Cas de test
const account = new BankAccount("Savings");

// Test 1 : Solde valide
account.balance = 100;
console.log(account.balance);

// Test 2 : Invalid balance (négatif)
account.balance = -50;
console.log(account.balance);

// Test 3 : Invalid balance (pas un nombre)
account.balance = "abc";
console.log(account.balance);

quiz iconTestez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Toutes les leçons de Programmation Orientée Objet

Entraînez-vous par vous-même : Compilateur JavaScript en ligne