[Javascript]자바스크립트 Property Attribute 완벽 정리: 이해와 활용 방법

이번 포스팅에서는 자바스크립트 Property Attribute에 대해 알아보겠습니다. 이 글의 목표는 Property Attribute의 개념을 이해하고, 다양한 활용 방법을 배우는 것입니다. 자바스크립트를 다루는 개발자라면 꼭 알아야 할 중요한 개념이니, 끝까지 읽어주세요!

≣ 목차

• Property Attribute란?📚
• Data Property Attributes💾
• Accessor Property Attributes🔄
• Property Attribute의 활용🛠️
• 속성 기술자(Property Descriptor) 확인하기🔍

자바스크립트의 Property Attribute를 이해하기 전에 객체의 기본 개념을 먼저 확인해 주세요😁

[Javascript]자바스크립트 객체 완벽 가이드: 선언, 사용법, 복사

---

01. Property Attribute란?📚

Property Attribute는 자바스크립트 객체의 속성에 대한 메타데이터입니다. 속성이 어떻게 동작하는지를 제어할 수 있습니다. 크게 두 가지로 나뉩니다.

• Data Property Attributes (데이터 속성)
• Accessor Property Attributes (접근자 속성)

각 속성의 종류와 역할을 알아보겠습니다.

---

02. Data Property Attributes💾

Data Property Attributes는 데이터를 포함하는 속성입니다. 다음과 같은 속성들이 있습니다.

1. 값(Value)

• 속성의 실제 값입니다.
• 기본값은 undefined입니다.

2. Writable

• 속성의 값을 수정할 수 있는지 여부를 나타냅니다.
• true로 설정되면 값을 수정할 수 있으며, false로 설정되면 값을 수정할 수 없습니다.
• 기본값은 false입니다.

3. Enumerable

• 속성이 열거 가능한지 여부를 나타냅니다.
• true로 설정되면 for...in 루프나 Object.keys()와 같은 메서드를 통해 속성을 열거할 수 있습니다.
• 기본값은 false입니다.

4. Configurable

• 속성의 정의를 변경하거나 속성을 삭제할 수 있는지 여부를 나타냅니다.
• true로 설정되면 속성을 변경하거나 삭제할 수 있으며, false로 설정되면 변경하거나 삭제할 수 없습니다.
  (단, writable이 true인 경우 Value, Writable을 변경하는 건 가능)
• 기본값은 false입니다.

let person = {
    name: "John"
};

Object.defineProperty(person, 'age', {
    value: 30,
    writable: true,
    enumerable: true,
    configurable: true
});
console.log(person.age); // 30

---

03. Accessor Property Attributes 🔄

Accessor Property Attributes는 값을 가져오거나 설정할 때 호출되는 함수입니다. 다음과 같은 속성들이 있습니다.

1. Get

• 속성의 값을 읽을 때 호출되는 함수입니다.
• 기본값은 undefined입니다.

2. Set

• 속성의 값을 설정할 때 호출되는 함수입니다.
• 기본값은 undefined입니다.

let person = {
    firstName: "John",
    lastName: "Doe",
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(" ");
    }
};

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

---

04. Property Attribute의 활용🛠️

자바스크립트의 Property Attributes는 객체의 속성을 더욱 세밀하게 제어할 수 있게 해 줍니다. 이를 활용하면 객체의 동작 방식을 맞춤화하고, 보안성 및 안정성을 높일 수 있습니다. 다음은 Property Attributes의 다양한 활용 예제입니다.
Object.defineProperty()를 사용하면 속성을 더 세밀하게 제어할 수 있습니다.

1. 불변 속성 만들기 (읽기 전용 속성)

속성의 값을 한 번 설정한 후 변경되지 않도록 만들 수 있습니다. 이를 위해 writable 속성을 false로 설정합니다.

const obj = {};

Object.defineProperty(obj, 'readOnly', {
  value: 'This value cannot be changed',
  writable: false,
  enumerable: true,
  configurable: true
});

console.log(obj.readOnly); // 'This value cannot be changed'
obj.readOnly = 'Trying to change value';
console.log(obj.readOnly); // 여전히 'This value cannot be changed'

---

2. 열거 불가능한 속성 만들기

속성을 for...in 루프나 Object.keys() 메서드에서 제외시키고 싶을 때 enumerable 속성을 false로 설정합니다.

const obj = {};

Object.defineProperty(obj, 'hidden', {
  value: 'This value is hidden from enumeration',
  enumerable: false,
  writable: true,
  configurable: true
});

for (let key in obj) {
  console.log(key); // 출력되지 않음
}

console.log(Object.keys(obj)); // 빈 배열 출력

---

3. 삭제 불가능한 속성 만들기

속성을 삭제할 수 없도록 하기 위해 configurable 속성을 false로 설정합니다.

const obj = {};

Object.defineProperty(obj, 'permanent', {
  value: 'This value cannot be deleted',
  configurable: false,
  writable: true,
  enumerable: true
});

console.log(obj.permanent); // 'This value cannot be deleted'
delete obj.permanent;
console.log(obj.permanent); // 여전히 'This value cannot be deleted'

---

4. 접근자 속성 활용

속성의 값을 읽거나 설정할 때 사용자 정의 로직을 실행하기 위해 get과 set 속성을 사용합니다.

const obj = {};
let internalValue = 0;

Object.defineProperty(obj, 'number', {
  get() {
    return internalValue;
  },
  set(value) {
    if (typeof value === 'number' && value > 0) {
      internalValue = value;
    } else {
      console.error('Value must be a positive number');
    }
  },
  enumerable: true,
  configurable: true
});

obj.number = 42;
console.log(obj.number); // 42

obj.number = -10; // 'Value must be a positive number'
console.log(obj.number); // 42

---

5. 데이터 모델링 및 캡슐화

Property Attributes를 사용하여 데이터 모델의 특정 속성들을 보호하고 캡슐화할 수 있습니다.

function Person(name, age) {
  Object.defineProperty(this, 'name', {
    value: name,
    writable: false,
    enumerable: true,
    configurable: false
  });

  let _age = age;
  Object.defineProperty(this, 'age', {
    get() {
      return _age;
    },
    set(value) {
      if (typeof value === 'number' && value > 0) {
        _age = value;
      } else {
        console.error('Invalid age value');
      }
    },
    enumerable: true,
    configurable: true
  });
}

const person = new Person('John', 30);
console.log(person.name); // 'John'
person.name = 'Doe'; // 무시됨
console.log(person.name); // 여전히 'John'

person.age = 31;
console.log(person.age); // 31
person.age = -5; // 'Invalid age value'
console.log(person.age); // 여전히 31

---

05. 속성 기술자(Property Descriptor)확인하기🔍

속성 기술자는 속성의 메타데이터를 반환합니다.
Object.getOwnPropertyDescriptor()와 Object.getOwnPropertyDescriptors()를 사용하여 속성의 속성들을 확인할 수 있습니다.

let user = {
    name: "Alice"
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor);
/*
{
    value: "Alice",
    writable: true,
    enumerable: true,
    configurable: true
}
*/