[JavaScript] #09 - Object.defineProperty()

Object.defineProperty()

Object.defineProperty을 사용하면 프로퍼티의 속성(attribute)을 정의할 수 있으며 이를 통해 객체에 값만

저장하는 방법 이외에도 변경 가능 여부 및 열거 가능 여부 등을 설정할 수 있다.

---

사용법

Object.defineProperty( 대상 객체, '프로퍼티 key', {프로퍼티 디스크립터 객체});

프로퍼티 디스크립터 객체는 프로퍼티의 속성을 나타내주는 객체이다.

---

코드 예시

const person = {};

// 데이터 프로퍼티의 정의
Object.defineProperty(person, 'firstname', {
  value: 'Hyenjae',
  writable: true,
  enumerable: true,
  configurable: true
});

// lastname은 value 이외에 설정해주지 않는다.
Object.defineProperty(person, 'lastname', {
  value: 'Lee'
});

let descriptor = Object.getOwnPropertyDescriptor(person, 'firstname');
console.log('firstname', descriptor)
// = firstname {value: 'Hyenjae', writable: true, enumerable: true, configurable: true}


// 설정해주지 않은 값은 false나 undefined가 기본이다.
descriptor = Object.getOwnPropertyDescriptor(person, 'lastname');
console.log('lastname', descriptor)
// = lastname {value: 'Lee', writable: false, enumerable: false, configurable: false}


// lastname은 열거가능 하지 않기 때문에 출력되지 않는다.
console.log(Object.keys(person))  // = ['firstname']


// lastname은 값을 변경할 수 없다.
person.lastname = 'Kim';
console.log(person.lastname);   // = Lee


// lastname은 값을 삭제할 수 없다.
delete person.lastname;
console.log(person.lastname);   // = Lee


// lastname은 값을 재정의 할 수 없다.
try {
  Object.defineProperty(person, 'lastname', {
    writable: true
  });
}
catch (error) {
  console.log(error)
}
// = TypeError: Cannot redefine property: lastname


// getter와 setter을 정의해본다.
Object.defineProperty(person, 'fullname', {
  get() {
    return `${this.firstname} ${this.lastname}`
  },
  set(name) {
    [this.firstname, this.lastname] = name.split(' ')
  },
  enumerable: true,
  configurable: true
})

// 그래도 lastname은 변하지 않는다..
person.fullname = 'Hyoen Kim';
console.log(person.fullname)
// = Hyoen Lee

---

Reflect.defineProperty()

Reflect.defineProperty() 메서드는 객체에 속성을 배치해 추가하거나 변경할 수 있다는 Object.defineProperty()와 같은 동작을 하지만 boolean을 반환한다는 차이점이 있다.

---

사용법

Reflect.defineProperty(target, propertyKey, attributes)

• target : 속성을 정의할 대상 객체.
• propertyKey : 설명하거나 또는 속성의 이름.
• attributes : 설명하거나 수정하는 속성을 기술하는 객체.

---

코드 예시

// Reflect.defineProperty() 사용하기
var obj = {};
Reflect.defineProperty(obj, 'x', {value: 7}); // true
obj.x; // 7

// 속성 정의 성공결과 알아내기
if (Reflect.defineProperty(target, property, attributes)) {
  // 성공
} else {
  // 실패
}

Object.definePeroperty() 메서드는 성공 시 객체를 반환하고 실패시 TypeError를 던지면 법적 속성으로

간주되어 발생 가능한 오류를 try ...catch 블럭으로 잡아야 하는 반면 Reflect.difineProperty() 메서드는

성공 여부를 나타내는 boolean을 반환하기 때문에 if ...else 블럭을 사용하면 된다.

---

프로퍼티에 대한 더 자세한 내용은

[JavaScript] - [JavaScript] #07 - 객체 프로퍼티 (데이터 / 접근자)

[JavaScript] #07 - 객체 프로퍼티 (데이터 / 접근자)

 

 

 

 

 

 

 

자료 출처 :https://basemenks.tistory.com/58 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty