[Js] Object Property에 대해 알아보자

들어가며

어느 날 vue의 구현 원리에 대한 글을 읽다가 getter & setter 관련 내용을 보게 되었다.

해당 내용에 대해서 살펴보다가 Object Property의 종류들과 descriptor를 알게 되었고 관련한 내용을 정리해본다.

종류

2가지 종류로 나뉜다. Data Property, Accessor Property 이다.

관련 개념으로 Descriptor가 있다.

Data Property

우리가 흔히 사용하고 있는 property로 getter, setter를 정의하지 않은 property 이다.

let obj = {
	firstName: "Half",
	lastName: "Road"
}

Accessor Property

getter or setter를 정의한 property이다.

let obj = {
  get myProp() {
	// data Format 등을 지정 할 수 있음
        console.log('property getter', myProp);
        return myProp;
    },
  set myProp(newValue) {
	// 입력 값에 대한 validation 등을 할 수 있음.
      console.log('property setter', newValue);
      myProp= newValue;
  },
}

이전 예제를 기반으로 fullName을 계산하는 getter만 존재하는 property도 만들 수 있다.

let obj = {
	firstName: "Half",
	lastName: "Road",
	get fullName() {
		return `${this.firstName} ${this.lastName}`
	}
}

console.log(obj.fullName)
// output > Half Road

위 두 종류의 Property의 차이를 간단히 설명을 해보았는데, 보다 자세한 분류를 알려면 Descriptor 개념을 알아야 한다.

Property Descriptor

Object Property에 대한 meta 정보에 대한 객체이다. defineProperty로 정의 할 수 있다.

먼저 Descriptor로 정의할 수 있는 속성들은 뭐가 있는지 살펴보자.

앞에서 나뉜 기준대로, Descriptor도 그에 따른 두 종류로 나뉘게 된다.

Data Descriptor

• value : 값
• writtable : {boolean} value 수정 가능 여부, configurable 보다 적용 우선순위가 높다.
• configurable : {boolean} 속성 삭제 및 변경 가능 여부
• enumerable: {boolean} 객체 순환 가능 여부, for … in 연산자, Object.keys 결과 값에 영향

Accessor Descriptor

설명이 따로 필요 없을 것 같아 자세한 설명은 생략하겠다.

• get: {function}
• set: {function}
• configurable
• enumerable

Descriptor 정의

Object.defineProperty

Data Descriptor로 예시를 들겠다.

let obj = {}
Object.defineProperty(obj, 'name', {
    value: "안녕",
    writable: true,
    configurable: false,
    enumerable: false,
})

객체의 Descriptor 확인

Object.getOwnPropertyDescriptors

let obj = {
	firstName: "Half",
	lastName: "Road",
	get fullName() {
		return `${this.firstName} ${this.lastName}`
	}
}
Object.defineProperty(obj, 'nation', {
    value: "Korea",
    writable: true,
    configurable: true,
    enumerable: true
})
console.log('descriptor', Object.getOwnPropertyDescriptors(obj));

// output

// descriptor {

//     firstName: {

//       value: 'Half',

//       writable: true,

//       enumerable: true,

//       configurable: true

//     },

//     lastName: {

//       value: 'Road',

//       writable: true,

//       enumerable: true,

//       configurable: true

//     },

//     fullName: {

//       get: [Function: get fullName],

//       set: undefined,

//       enumerable: true,

//       configurable: true

//     },

//     nation: {

//       value: 'Korea',

//       writable: true,

//       enumerable: true,

//       configurable: true

//     }

//   }

마치며

Vue나 Typescript를 보면서 어떻게 저게 구현될 수 있는지 이따금 생각한 적이 있는데, Object Property를 공부하면서 어느 정도는 구현 원리에 대해서 이해할 수 있는 계기가 된 것 같다.

개발을 하는 것도 중요하지만 한 번씩 은 상위 기술들을 사용하면서 어떻게 이게 가능 한 걸까? 라는 질문을 던져 보는 것이 앞으로 변화할 기술들에 대비할 수 있는 힘이 될 것 같다는 생각을 해본다.