JavaScript에서 접근자 프로퍼티와 캡슐화

JavaScript에서 접근자 프로퍼티와 캡슐화

접근자 프로퍼티: Getter와 Setter

JavaScript에서 객체의 프로퍼티에는 크게 두 가지 유형이 있습니다. 데이터 프로퍼티와 접근자 프로퍼티입니다.

데이터 프로퍼티

기본적으로 변수에 값을 할당하는 것처럼 객체의 프로퍼티에 값을 저장하는 것을 '데이터 프로퍼티'라고 부릅니다.

const car = {
  model: "Sedan",
  year: 2022
};

접근자 프로퍼티

반면에, 접근자 프로퍼티는 실제 값을 갖지 않습니다. 대신, 다른 프로퍼티의 값을 읽거나 저장할 때 작동하는 getset 메서드를 정의합니다.

const student = {
  _score: 90,
  get score() {
    return this._score;
  },
  set score(value) {
    if (value < 0 || value > 100) {
      throw new Error("점수는 0~100 사이여야 합니다.");
    }
    this._score = value;
  }
};

클래스에서의 접근자 프로퍼티

getset 메서드는 클래스에서도 사용 가능합니다.

class Movie {
  constructor(title, year) {
    this.title = title;
    this.year = year;
  }
  get info() {
    return `${this.title} (${this.year})`;
  }
  set yearReleased(y) {
    if (y < 1800) return;
    this.year = y;
  }
}

일반적으로는 데이터 프로퍼티와 동일한 접근자 프로퍼티 명을 짓습니다.

class User {
  constructor(name, age) {
    this.name = name;
    this._age = age;  // 내부에서만 사용할 프로퍼티는 보통 '_'로 시작합니다.
  }

  get age() {
    return this._age;
  }

  set age(value) {
    if (value < 0) {
      console.error("나이는 음수가 될 수 없습니다.");
      return;
    }
    this._age = value;
  }
}

const user = new User("John", 30);
console.log(user.age); // 30

user.age = -1;  // "나이는 음수가 될 수 없습니다."
console.log(user.age); // 30

다만, _age라고 변수 명을 수정해야 합니다. 그렇지 않고 age를 사용하면 데이터 프로퍼티에 할당하는 과정(this.age = age)에 age를 호출할 경우 set메서드를 호출하는 과정을 반복할 수도 있습니다.

프로퍼티 이름 앞에 언더스코어(_)를 붙이면 이 프로퍼티는 클래스 내부에서만 사용되고, 외부에서는 접근하지 않는 것으로 알려주긴 하나, 실제로는 외부에서도 접근 가능합니다.

console.log(user._age); // 30

이렇게 접근할 수 있으므로 완전한 캡슐화를 보장하지는 않습니다. 그래서 아래처럼 # 를 사용해 캡슐화를 구현할 수 있습니다.

은닉과 캡슐화

JavaScript에서는 # 기호를 사용하여 private 필드를 정의할 수 있습니다. 이러한 private 필드는 클래스 외부에서 접근할 수 없어 캡슐화를 구현합니다.

class BankAccount {
  #balance = 0;

  get balance() {
    return this.#balance;
  }

  deposit(amount) {
    if (amount < 0) return;
    this.#balance += amount;
  }
}

이 방법을 사용하면, 외부에서 #balance 필드에 직접 접근할 수 없습니다.

const myAccount = new BankAccount();
console.log(myAccount.#balance);  // SyntaxError

'JavaScript > JavaScript' 카테고리의 다른 글

밀집 배열과 희소 배열  (1) 2024.02.26
옵셔널 체이닝(Optional Chaining)  (1) 2024.02.25
JS 문자열 비교 연산자  (1) 2023.10.06
호이스팅(Hoisting)  (0) 2023.09.27
sort 메소드  (0) 2023.09.06