Menu
Coddy logo textTech

유효성 검사와 부수 효과

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

Getter와 setter는 단순히 속성을 읽고 쓰는 것 이상의 작업을 수행할 수 있습니다. 값이 변경될 때 입력을 검증하고 부수 효과를 트리거할 수도 있습니다.

유효성 검사를 포함한 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}`);
  }
}

이제 setter를 사용하면 validation이 자동으로 발생합니다:

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

// 이건 작동합니다
user.age = 30;  // 로그: "Age updated to 30"

// 이건 오류를 발생시킵니다
user.age = -5;  // 오류: Age는 0과 120 사이여야 합니다

// 이것도 오류를 발생시킵니다
user.age = "thirty";  // 오류: Age는 숫자여야 합니다

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

challenge icon

챌린지

BankAccount 클래스와 기본 setter가 주어집니다. 여러분의 작업은 balance setter를 완성하는 것입니다.

setter에 다음을 추가하세요:

  1. Validation: value가 number가 아니거나 0보다 less than인지 확인하세요. 그렇다면 console.log("Invalid balance")를 실행하고 return을 사용하여 setter를 종료하세요.
  2. Side 효과: 유효한 값을 저장한 후 console.log(\`Balance updated to $${value}\`)를 실행하세요.

직접 해보기

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

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

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

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

// Test 3: Invalid balance (not a number)
account.balance = "abc";
console.log(account.balance);

quiz icon실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

객체 지향 프로그래밍의 모든 레슨

직접 연습해 보세요: 온라인 JavaScript 컴파일러