get 및 set 키워드

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

게터와 세터는 속성처럼 보이지만 실제로는 함수인 특수 메서드입니다. 속성에 접근하고 속성을 수정하는 방식을 제어할 수 있게 해 줍니다.

간단한 Person 클래스를 만들어 봅시다:

class Person {
  constructor(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }
  
  // fullName의 게터
  get fullName() {
    return `${this._firstName} ${this._lastName}`;
  }
  
  // fullName의 세터
  set fullName(value) {
    const parts = value.split(' ');
    this._firstName = parts[0];
    this._lastName = parts[1];
  }
}

_firstName과 _lastName의 밑줄은 명명 규칙입니다. 이 규칙은 다른 개발자에게 이 속성들이 내부용이며 직접 읽거나 변경하지 말고 getter와 setter를 통해 읽고 변경해야 한다는 것을 알려줍니다. JavaScript는 이를 강제하지 않습니다.

이제 이러한 getter와 setter를 속성처럼 사용할 수 있습니다.

// 새 Person 생성
const person = new Person('John', 'Doe');

// getter 사용
console.log(person.fullName); // 출력: John Doe

// setter 사용
person.fullName = 'Jane Smith';

// setter가 내부 속성을 업데이트함
console.log(person.fullName); // 출력: Jane Smith

이러한 메서드를 괄호와 함께 호출하지 않는다는 점에 유의하세요. 메서드는 속성처럼 동작하지만, 접근하거나 수정할 때 코드를 실행합니다.

챌린지

age 속성이 있는 User 클래스가 주어집니다. 다음을 수행하는 age의 getter와 setter를 추가하세요.

Getter get age(): 저장된 나이를 반환합니다
Setter set age(newAge): 나이가 0에서 120 사이인지 확인합니다
- 유효한 경우(0-120): this._age에 저장합니다
- 유효하지 않은 경우: 변경하지 않고 "Invalid age!"를 출력합니다

직접 해보기

import { User } from './user.js';

// 테스트 코드 - 수정하지 마세요
const user = new User("Alice", 25);
console.log(user.age);      // 25가 출력되어야 합니다

user.age = 30;
console.log(user.age);      // 30이 출력되어야 합니다

user.age = 150;             // "Invalid age!"가 표시되어야 합니다
console.log(user.age);      // 여전히 30이 출력되어야 합니다 (변경되지 않음)