JavaScript 객체 접근자 (Object Accessors)

JavaScript 객체 접근자(accessors)는 특별한 메서드로, 객체 프로퍼티의 값을 가져오거나 설정할 수 있는 방법을 제공합니다. 이러한 접근자는 "getter"와 "setter"라고 불리며, 일반 프로퍼티와는 다르게 작동합니다.

Getter와 Setter 예제

아래 코드는 Person 객체에 fullName이라는 가상의 프로퍼티를 사용하는 예제입니다. 이 프로퍼티는 실제로 존재하지 않지만, get과 set 접근자를 통해 연산됩니다.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // "John Doe"

person.fullName = 'Jane Smith';
console.log(person.fullName); // "Jane Smith"

설명

Getter (get): fullName 프로퍼티를 읽을 때 호출되는 메서드입니다. 이 경우, firstName과 lastName을 결합하여 반환합니다.

Setter (set): fullName 프로퍼티에 값을 할당할 때 호출되는 메서드입니다. 이 경우, 전달된 문자열을 분할하여 firstName과 lastName에 각각 할당합니다.

이렇게 하면 객체의 내부 상태를 보다 세밀하게 제어하고 유효성 검사를 수행하며, 객체와 상호작용하는 인터페이스를 향상시킬 수 있습니다.

Object.defineProperty() 메서드

객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고, 그 객체를 반환합니다. 이 메서드를 사용하면, 속성에 대한 세부적인 설정이 가능하며, 이는 일반적인 점 표기법 또는 대괄호 표기법을 사용할 때 할 수 없는 것들을 가능하게 합니다.

구문

Object.defineProperty(obj, prop, descriptor)
obj: 속성을 정의할 객체.
prop: 새로 정의하거나 수정할 속성의 이름.
descriptor: 해당 속성을 설명하는 속성 설명자 객체.

예제

다음 예제는 Person 객체에 fullName 속성을 get과 set 접근자를 사용하여 정의합니다.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  Object.defineProperty(this, 'fullName', {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(value) {
      const parts = value.split(' ');
      this.firstName = parts[0];
      this.lastName = parts[1];
    }
  });
}

const john = new Person('John', 'Doe');
console.log(john.fullName); // "John Doe"

john.fullName = 'Jane Smith';
console.log(john.fullName); // "Jane Smith"

예제2