JavaScript accessor property

agnusdei·2023년 7월 18일
0

자바스크립트에서는 객체의 프로퍼티에 접근자(getter)와 설정자(setter)를 정의하여 프로퍼티에 접근하거나 값을 설정할 때 사용할 수 있습니다. 이러한 접근자 프로퍼티는 객체의 특정 프로퍼티에 대한 접근을 제어하고, 프로퍼티 값을 읽거나 설정하기 전에 추가 동작을 수행할 수 있도록 합니다.

  1. get 접근자:
    get 키워드를 사용하여 객체의 프로퍼티에 접근할 때 해당 프로퍼티 값을 반환하는 메서드를 정의합니다. get 접근자를 사용하면 프로퍼티 값을 읽을 때마다 추가적인 동작을 수행할 수 있습니다.

  2. set 접근자:
    set 키워드를 사용하여 객체의 프로퍼티에 값을 설정할 때 해당 프로퍼티 값을 처리하는 메서드를 정의합니다. set 접근자를 사용하면 프로퍼티에 값을 설정할 때마다 추가적인 동작을 수행할 수 있습니다.

  3. enumerable 속성:
    enumerable 속성은 불리언 값(true 또는 false)으로, 프로퍼티가 열거 가능한지를 나타냅니다. 열거 가능한 프로퍼티는 for...in 루프나 Object.keys() 메서드 등을 통해 객체의 프로퍼티를 순회할 때 포함됩니다.

  4. configurable 속성:
    configurable 속성은 불리언 값(true 또는 false)으로, 프로퍼티가 변경 가능한지를 나타냅니다. 변경 가능한 프로퍼티는 delete 연산자를 통해 삭제하거나, 접근자 프로퍼티를 재정의할 수 있습니다.

이제 코드 예시를 통해 자세히 살펴보겠습니다.

// 객체 생성
const person = {
  firstName: 'John',
  lastName: 'Doe',
  
  // getter 접근자 정의
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },

  // setter 접근자 정의
  set fullName(name) {
    const [firstName, lastName] = name.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  },
};

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

// setter 접근자 사용
person.fullName = "Alice Smith";
console.log(person.firstName); // 출력: "Alice"
console.log(person.lastName);  // 출력: "Smith"

위의 코드에서 fullName은 접근자 프로퍼티로 정의되어 있습니다. get 접근자는 fullName에 접근할 때 해당 함수를 실행하여 firstNamelastName을 합친 전체 이름을 반환합니다. set 접근자는 fullName에 값을 설정할 때 호출되며, 입력된 이름을 공백을 기준으로 firstNamelastName으로 분리하여 객체의 프로퍼티에 설정합니다.

또한, 접근자 프로퍼티의 enumerableconfigurable 속성을 설정하지 않았기 때문에 기본값인 true가 적용되어 열거 가능하고 변경 가능한 프로퍼티입니다. 이를 사용자 정의로 변경하려면 Object.defineProperty() 메서드를 사용할 수 있습니다.

1개의 댓글

comment-user-thumbnail
2023년 7월 18일

글이 많은 도움이 되었습니다, 감사합니다.

답글 달기