유효성 검사와 부수 효과

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

게터(Getters)와 세터(Setters)는 단순히 속성을 읽고 쓰는 것 이상의 작업을 수행할 수 있습니다. 즉, 입력을 검증하거나 값이 변경될 때 부수 효과(side effects)를 발생시킬 수 있습니다.

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

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

이제 세터를 사용할 때 유효성 검사가 자동으로 수행됩니다:

const user = new User('Alice', 25);

// 정상적으로 작동합니다
user.age = 30;  // 로그: "Age updated to 30"

// 에러가 발생합니다
user.age = -5;  // 에러: Age must be between 0 and 120

// 역시 에러가 발생합니다
user.age = "thirty";  // 에러: Age must be a number

Validation = 값을 저장하기 전에 유효한지 확인하는 것
Side Effects = 속성이 변경될 때 발생하는 추가적인 작업들

챌린지

기본 setter가 포함된 BankAccount 클래스가 제공됩니다. 여러분의 작업은 balance setter를 완성하는 것입니다.

setter에 다음을 추가하세요:

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

치트 시트

Getter와 setter는 입력을 검증하고 값이 변경될 때 사이드 이펙트(부수 효과)를 트리거할 수 있습니다.

유효성 검사(Validation)는 값을 저장하기 전에 해당 값이 유효한지 확인합니다:

set age(value) {
  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;
}

사이드 이펙트(Side Effects)는 속성이 변경될 때 발생하는 추가적인 작업입니다:

set age(value) {
  // 유효성 검사...
  this._age = value;
  
  // 사이드 이펙트: 나이가 변경될 때 로그 출력
  console.log(`Age updated to ${value}`);
}

사용 예시:

const user = new User('Alice', 25);
user.age = 30;  // 로그: "Age updated to 30"
user.age = -5;  // 에러: Age must be between 0 and 120

직접 해보기

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

// 테스트 케이스
const account = new BankAccount("Savings");

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

// Test 2: 유효하지 않은 잔액 (음수)
account.balance = -50;
console.log(account.balance);

// Test 3: 유효하지 않은 잔액 (숫자가 아님)
account.balance = "abc";
console.log(account.balance);