Validasi dan Efek Samping

Termasuk bagian Pemrograman Berorientasi Objek dalam perjalanan JavaScript di Coddy. Pelajaran 45 dari 56.

Getter dan setter dapat melakukan lebih dari sekadar membaca dan menulis property. Keduanya dapat memvalidasi input dan memicu efek samping saat nilai berubah.

Mari buat class User dengan validasi:

class User {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
  get age() {
    return this._age;
  }
  set age(value) {
    // Pastikan age berupa angka dan berada dalam rentang yang wajar
    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;
    // Efek samping: catat saat age berubah
    console.log(`Age updated to ${value}`);
  }
}

Sekarang, saat kita menggunakan setter, validasi terjadi secara otomatis:

const user = new User('Alice', 25);
// Ini berhasil
user.age = 30;  // Mencatat: "Age updated to 30"
// Ini menghasilkan error
user.age = -5;  // Error: Usia harus antara 0 dan 120
// Ini juga menghasilkan error
user.age = "thirty";  // Error: Usia harus berupa angka

Validasi = Memeriksa apakah suatu nilai valid sebelum menyimpannya
Efek Samping = Tindakan tambahan yang terjadi saat sebuah property berubah

Tantangan

Kamu diberi class BankAccount dengan setter dasar. Tugasmu adalah melengkapi setter balance.

Tambahkan ke setter:

Validasi: Periksa apakah value bukan angka ATAU kurang dari 0. Jika ya, gunakan console.log("Invalid balance") dan return untuk keluar dari setter
Efek samping: Setelah menyimpan nilai yang valid, gunakan console.log(\`Balance updated to $${value}\`)

Coba sendiri

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

// Kasus uji
const account = new BankAccount("Savings");

// Pengujian 1: Saldo valid
account.balance = 100;
console.log(account.balance);

// Pengujian 2: Invalid balance (negatif)
account.balance = -50;
console.log(account.balance);

// Pengujian 3: Invalid balance (bukan angka)
account.balance = "abc";
console.log(account.balance);