유효성 검사와 부수 효과

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨. 56개 중 45번째.

게터와 세터는 속성을 읽고 쓰는 것뿐 아니라, 입력값을 검증하고 값이 바뀔 때 부수 효과를 일으킬 수도 있습니다.

유효성 검사를 포함한 User 클래스를 만들어 봅시다:

class User {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
  get age() {
    return this._age;
  }
  set age(value) {
    // age가 숫자이고 적절한 범위에 있는지 검증
    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;
    // 부수 효과: age가 변경될 때 로그 기록
    console.log(`Age updated to ${value}`);
  }
}

이제 설정자를 사용하면 유효성 검사가 자동으로 이루어집니다.

const user = new User('Alice', 25);
// 이 코드는 정상적으로 작동합니다
user.age = 30;  // 로그 출력: "Age updated to 30"
// 이 코드는 오류를 발생시킵니다
user.age = -5;  // 오류: 나이는 0에서 120 사이여야 합니다
// 이 코드도 오류를 발생시킵니다
user.age = "thirty";  // 오류: 나이는 숫자여야 합니다

유효성 검사 = 값을 저장하기 전에 유효한지 확인하는 것
부수 효과 = 속성이 변경될 때 발생하는 추가 동작

챌린지

기본 setter가 있는 BankAccount 클래스가 주어집니다. 과제는 balance setter를 완성하는 것입니다.

setter에 다음을 추가하세요.

유효성 검사: value가 숫자가 아니거나 0보다 작은지 확인하세요. 그렇다면 console.log("Invalid balance")를 실행하고 return을 사용해 setter를 종료하세요.
부수 효과: 유효한 값을 저장한 후 console.log(\`Balance updated to $${value}\`)를 실행하세요.

직접 해보기

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

// 테스트 사례
const account = new BankAccount("Savings");

// 테스트 1: 유효한 잔액
account.balance = 100;
console.log(account.balance);

// 테스트 2: Invalid balance (음수)
account.balance = -50;
console.log(account.balance);

// 테스트 3: Invalid balance (숫자가 아님)
account.balance = "abc";
console.log(account.balance);