Menu
CoddyTech

Validierung und Seiteneffekte

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy. Lektion 45 von 56.

Getter und Setter können mehr als nur Eigenschaften lesen und schreiben – sie können Eingaben validieren und Nebenwirkungen auslösen, wenn sich Werte ändern.

Lass uns eine User-Klasse mit Validierung erstellen:

class User {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
  get age() {
    return this._age;
  }
  set age(value) {
    // Prüfen, ob das Alter eine Zahl ist und in einem angemessenen Bereich liegt
    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;
    // Nebeneffekt: protokollieren, wenn sich das Alter ändert
    console.log(`Age updated to ${value}`);
  }
}

Wenn wir jetzt den Setter verwenden, erfolgt die Validierung automatisch:

const user = new User('Alice', 25);
// Das funktioniert
user.age = 30;  // Protokolliert: "Age updated to 30"
// Das löst einen Fehler aus
user.age = -5;  // Fehler: Age muss zwischen 0 und 120 liegen
// Das löst ebenfalls einen Fehler aus
user.age = "thirty";  // Fehler: Age muss eine Zahl sein

Validierung = Überprüfen, ob ein Wert gültig ist, bevor er gespeichert wird
Nebeneffekte = Zusätzliche Aktionen, die ausgeführt werden, wenn sich eine Eigenschaft ändert

challenge icon

Aufgabe

Du erhältst eine Klasse BankAccount mit einem einfachen Setter. Deine Aufgabe ist es, den Setter balance zu vervollständigen.

Füge dem Setter Folgendes hinzu:

  1. Validierung: Prüfe, ob value keine Zahl oder kleiner als 0 ist – wenn ja, console.log("Invalid balance") und verwende return, um den Setter zu verlassen
  2. Nebeneffekt: Gib nach dem Speichern eines gültigen Werts console.log(\`Balance updated to $${value}\`) aus

Probier es selbst

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

// Testfälle
const account = new BankAccount("Savings");

// Test 1: Gültiger Kontostand
account.balance = 100;
console.log(account.balance);

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

// Test 3: Invalid balance (keine Zahl)
account.balance = "abc";
console.log(account.balance);

quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Objektorientierte Programmierung

Übe selbstständig: Online-JavaScript-Compiler