JavaScript

[JavaScript] #09 - Object.defineProperty()

yoonddo 2023. 1. 14. 19:07

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 - 객체 프로퍼티 (데이터 / 접근자)

자바스크립트에는 8가지의 자료형 ( number, string, BigInt, boolean, null, undefined, Symbol, 객체) 이 존재한다. 이 중 객체를 제외한 나머지들은 딱 하나의 값만 가질 수 있는데, 이런 자료형을 원시타입(prim

yoonddo.tistory.com

 

 

 

 

 

 

 

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