본문 바로가기

Study

Object.defineProperty, Object.defineProperties

자바스크립트는 프로토타입 기반 언어이자 객체지향 언어다.

잘쓰면 편리하지만 잘못사용하기 쉬운 Object의 속성값을 지정하고

불변(immutable) 속성으로 만들거나 간단하게 getter, setter도 선언할수 있는 메소드다

 

컨셉

object를 다루는데 있어서 동작은 크게 다음과 같이 나눌수 있다.

 

  • 열거하기 ( enumerable ) Ex) for in, Object.keys()
  • 초기값 선언하기
  • 값 수정하기 ( writable, set )
  • 값 가져오기 ( get )

Object.freefreeze 를 사용하거나 Symbol, yield 등을 사용해서 나타낼수도 있지만

defineProperty, defineProperties를 사용해서 간단하고 쉽게 제어할수도 있다.

대표적으로 VUE가 초기 data를 사용할때 이 방법을 사용한다.

 

 

Object.defineProperty(obj, prop, descriptor) 으로 선언하며

 

descriptor는 2가지로 나눈다.

  1. data descriptors ( 데이터 서술자 )
  2. accessor descriptors ( 접근 서술자 )

 

데이터 서술자, 접근 서술자 모두 가지는 key

configurable 속성을 해당 객체에서 삭제하거나, 데이터 서술자를 변경할수 있다. [Boolean, false]
enumerable 열거할수 있다. 기본값은 [Boolean, false]

 

데이터 서술자의 추가 key

value 초기값 선언 [any value, undefined]
writable 데이터 수정 가능 [Boolean, false]

 

접근 서술자의 추가 key

get getter [function: V, undefined]
set setter [function<value>: V, undefined]

 

 

let o1 = {}

o1.a = 1 
/*
	위 선언은 Object.defineProperty로 다음과 같이 나타낼수 있다.
    
   	Object.defineProperty(o1, 'a', {
    	value: 1,
        writable: true,
        configurable: true,
        enumerable: true
    })
*/

 

Object.defineProperty 공식 문서

 

Object.defineProperty()

The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

developer.mozilla.org

Object.defineProperties 공식 문서

반응형