[JS] 프로퍼티 플래그

hanganda23·2021년 3월 24일
0

모던JS 공부하기

목록 보기
2/4
post-thumbnail

자바스크립트의 객체의 프로퍼티는 key-value 쌍 외에도, 추가 구성 옵션을 가지고 있습니다.

객체 프로퍼티의 추가 구성 옵션에 대해 알아봅니다.

프로퍼티 플래그

객체 프로퍼티는 값(value)와 함께 세 가지의 플래그(flag)를 가지고 있습니다.

세 가지의 플래그는 평범한 방식으로 만들면, 모두 true로 설정됩니다.

  • writable : true면 값을 수정할 수 있습니다.
  • enumable : true면 반복문을 사용해 나열할 수 있습니다.
  • configurable : true면 프로퍼티 삭제나 플래그의 수정이 가능합니다.

프로퍼티 플래그 관련 메서드

Object.getOwnPropertyDescriptor

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

/*
	{
    	value 
    }
*/

객체와 프로퍼티 명을 인자로, 설명자를 얻을 수 있습니다.
설명자에는 프로퍼티의 값과 세 플래그에 대한 정보가 담겨 있습니다.

Object.defineProperty

Object.defineProperty(obj, propertyName, descriptor);

객체와 프로퍼티 명, 적용하는 설명자를 인자로 설명자를 정의합니다.

defineProperty 메서드는 프로퍼티가 있다면 해당 설명자로 변경해주고,
없다면 새로운 프로퍼티를 만들어줍니다.

만약, 플래그 정보가 설명자에 없다면 플래그의 값은 false가 됩니다.

let obj = {
	age : 23,
}

Object.defineProperty(obj, 'name', {value:'yuno'});
// flag : false

//writable : false
obj.name = 'change' // err (use strict)

//enumable : false
for(let key in obj) {
	console.log(key) // age
}

//configurable : false
delete obj.name; // err

configurable 플래그

구성 가능함을 나타내는 플래그 configurable가 false 라면 다음과 같은 제약사항을 갖습니다.

  • configurable 플래그를 수정할 수 없음
  • enumerable 플래그를 수정할 수 없음.
  • writable: false의 값을 true로 바꿀 수 없음 (true를 false로 변경하는 것은 가능함).
  • 접근자 프로퍼티 get/set을 변경할 수 없음 (새롭게 만드는 것은 가능함).

이처럼, configurable 플래그를 수정할 수 없기에 한번 configurable이 false로 설정하면,
다시 defineProperty를 사용해도 true로 바꿀 수 없습니다.

이러한 특징으로 영원히 수정할 수 없는 프로퍼티를 만들 수 있습니다.

몇몇 내장객체의 프로퍼티들은 configurable:false가 설정되어 있습니다.
Math.PI가 대표적인 예입니다. 이 프로퍼티는 쓰기, 열거, 구성이 불가합니다.

복수의 프로퍼티를 대상으로 하는 메서드

Object.definedProperties

프로퍼티 여러개를 한번에 정의할 수 있습니다.

Object.definedProperties(obj, {
	props1 : decriptor1,
  	props2 : decriptor2,
})

Object.getOwnPropertyDescriptors

객체의 프로퍼티 설명자를 전부 얻을 수 있습니다.

Object.definedProperties와 함께 사용하면, 플래그 까지 복사할 수 있습니다.

let clone = Object.definedProperties(obj,Object.getOwnPropertyDescriptors(obj));
profile
프론트엔드 취준생

0개의 댓글