프로퍼티 어트리뷰트란(Property Attribute)?

이번에는 객체의 프로퍼티가 어떻게 동작하는지 제어할 수 있는 프로퍼티 어트리뷰트에 대해 알아보겠습니다. 프로퍼티 어트리뷰트는 크게 1.데이터 프로퍼티와 2.액세서 프로퍼티로 나눌 수 있습니다. 객체지향 프로그래밍에서 자바스크립트 객체를 세밀하게 관리할 때 프로퍼티 어트리뷰트를 활용할 수 있어요! 그럼 이제 예제와 함께 하나씩 살펴보도록 하겠습니다. 🐾

---

🎯 1. 데이터 프로퍼티와 액세서 프로퍼티의 차이

• 데이터 프로퍼티: 실제 값을 저장하는 일반적인 프로퍼티로, 키와 값으로 구성됩니다.
• 액세서 프로퍼티: 자체적으로 값을 저장하지 않고, 다른 값을 가져오거나 설정할 때 호출되는 함수로 구성됩니다. 대표적으로 getter와 setter가 이에 해당합니다.

📝 예시: 데이터 프로퍼티와 액세서 프로퍼티

• type과 size는 데이터 프로퍼티입니다.

const maltese = {
  type: '말티즈',
  size: 'small',
};

console.log(Object.getOwnPropertyDescriptor(maltese, 'type'));
// { value: '말티즈', writable: true, enumerable: true, configurable: true }

• age가 액세서 프로퍼티입니다. get과 set을 사용해 프로퍼티의 값을 가져오거나 설정할 수 있어요.

const pome = {
  type: '포메라니안',
  size: 'small',
  year: 2021, // 데이터 프로퍼티 3개

  get age() {
    return new Date().getFullYear() - this.year;
  },

  set age(age) {
    this.year = new Date().getFullYear() - age;
  } // 액세서 프로퍼티 2개
};

console.log(pome.age); // 액세서 프로퍼티 사용 예시

---

🎯 2. 데이터 프로퍼티의 속성

데이터 프로퍼티는 다음과 같은 네 가지 속성을 가집니다:

1. value: 프로퍼티의 실제 값입니다.
2. writable: 값을 수정할 수 있는지 여부입니다. false로 설정하면 값을 변경할 수 없습니다.
3. enumerable: 열거 가능한지 여부를 나타냅니다. true로 설정하면 for...in문이나 Object.keys()로 열거할 수 있습니다.
4. configurable: 해당 프로퍼티를 삭제하거나 속성을 수정할 수 있는지 여부를 나타냅니다. false로 설정하면 속성 재정의가 불가능합니다.

📝 예시: 데이터 프로퍼티 속성 수정

• pome 객체에 height라는 프로퍼티를 추가하고, 그 속성을 세밀하게 정의했습니다.

Object.defineProperty(pome, 'height', {
  value: 172,
  writable: true, // 값 변경 가능
  enumerable: true,
  configurable: true,
});

console.log(pome.height); // 172

pome.height = 180;
console.log(pome.height); // 180

🎯 3. writable, enumerable, configurable 속성

writable은 값을 변경할 수 있는지, enumerable은 프로퍼티를 열거할 수 있는지, configurable은 프로퍼티의 속성을 변경하거나 삭제할 수 있는지 여부를 결정합니다.

📝 예시: writable 속성 변경

• writable을 false로 설정하면 값을 변경할 수 없게 됩니다.

Object.defineProperty(pome, 'height', {
  writable: false, // 값 변경 불가능
});

pome.height = 172;
console.log(pome.height); // 180 (값이 변경되지 않음)

📝 예시: enumerable 속성 변경

 

• enumerable을 false로 설정하면 for...in이나 Object.keys()로 열거되지 않습니다.

Object.defineProperty(pome, 'type', {
  enumerable: false, // 열거 불가능
});

console.log(Object.keys(pome)); // ['size', 'year', 'age', 'height'] type 빼고 열거됨

📝 예시: configurable 속성 변경

• configurable을 false로 설정하면 프로퍼티의 속성을 변경하거나 삭제할 수 없습니다.

Object.defineProperty(pome, 'height', {
  configurable: false, // 속성 재정의 불가능
});

---

⭐ 중요: 프로퍼티 어트리뷰트 활용 시 주의사항

1. configurable을 false로 설정하면 해당 프로퍼티의 속성 변경이 제한됩니다.
2. writable이 true이면 configurable이 false여도 값을 변경할 수 있습니다.
3. writable을 false로 변경할 수는 있지만, 한 번 변경되면 다시 true로 바꿀 수 없습니다.

🛠 실무적인 팁

• 객체의 상태를 외부에서 임의로 변경하지 못하게 막고 싶다면 writable과 configurable 속성을 적절히 활용하세요.
• getter와 setter를 통해 내부 데이터의 가공된 값을 제공하거나, 값을 설정할 때 추가적인 검증을 수행할 수 있습니다.
• 모든 프로퍼티를 열거하거나 수정 가능한 상태로 만드는 것은 위험할 수 있습니다. 필요한 경우에만 속성을 열거 가능(enumerable)하고 변경 가능(writable)하게 만들어야 합니다.

---

📌 결론

프로퍼티 어트리뷰트를 통해 객체의 프로퍼티가 어떻게 동작하는지 세밀하게 제어할 수 있습니다. 데이터 프로퍼티와 액세서 프로퍼티를 구분하고, 각 속성(writable, enumerable, configurable)을 적절히 설정하면 객체의 상태를 안전하게 관리할 수 있습니다.

이번에는 프로퍼티 어트리뷰트에 대해 자세히 알아보았습니다! 객체의 프로퍼티를 제대로 이해하고 제어하는 것은 자바스크립트 프로그래밍에서 매우 중요하답니다! 😊