[JS] 프로퍼티 옵션(플래그) 다루기(Property Flag)

 

안녕하세요 Foma💻 입니다.

 

오늘은 자바스크립트의 프로퍼티 플래그에 대해서 정리해보려고 합니다.

 

모던 자바스크립트 사이트에서 공부하는 것을 복습하는 차원에서 제가 이해한 방식으로 적어보겠습니다!

 

바로 시작할게요~

---

Property Flag란?

 

프로퍼티는 값 뿐만 아니라 플래그라 불리는 특별한 속성 3가지를 가진다.

 

1. writable

 

해당 프로퍼티를 수정할 수 있게 설정하는 플래그

 

2. enumrable

 

해당 프로퍼티를 나열할 수 있게 설정하는 플래그

 

3. configurable

 

해당 프로퍼티를 삭제, 플래그 수정이 가능하게 설정하는 플래그

---

Property Flag 확인하는 방법

 

Object.getOwnPropertyDescriptor(객체,프로퍼티명)으로 확인하고,

 

초기엔 모두 true로 설정되어 있다.

 

let user = {
    nickName:"foma",
    age:27
}
let descriptor = Object.getOwnPropertyDescriptor(user,'nickName')
console.log(descriptor)//{ value: 'foma', writable: true, enumerable: true, configurable: true }

---

Writable

 

유저의 nickName의 writable 프로퍼티 플래그를 flag를 false로 설정하고

 

Object.defineProperty(user,'nickName',{
    writable:false
})

 

다시 한번 프로퍼티 플래그를 확인하면 writable만 false로 되어있다.

 

print(Object.getOwnPropertyDescriptor(user,'nickName')) //{ value: 'foma', writable: false, enumerable: true, configurable: true }

 

만약 수정하려고 하면 엄격모드일 땐 error가 나고 아니면 그냥 무시된다.

 

user.nickName = "Foma" //error

---

Enumerable

 

user에 sayHi 메서드를 추가한 뒤 프로퍼티를 순회하여 출력하면 아래와 같이 메서드 포함해서 모두 출력된다.

 

user.sayHi = function (){
    print("안녕")
}
for (let key in user) {
    print(key)
} 
/*
nickName
age
sayHi
*/

 

여기서 만약 nickName의 enumerable 프로퍼티 플래그를 false로 설정하고 다시 한번 순회하면 

 

nickName이 제외된 채 출력된다.

 

Object.defineProperty(user,'nickName',{
    enumerable:false
})
for (let key in user) {
    print(key)
}
/*
age
sayHi
*/

---

Configurable

 

nickName의 configurable 프로퍼티 플래그를 false로 설정하고

 

Object.defineProperty(user,'nickName',{
    configurable:false
})

 

해당 프로퍼티를 삭제하려고 하면 에러가 발생한다.

 

delete user.nickName //에러

 

또한 해당 프로퍼티의 다른 플래그를 변경하려고 해도 에러가 발생한다.

 

Object.defineProperty(user,'nickName',{
    writable:true
}) //에러

 

만약 writable과 configurable이 모두 false라면 삭제나 수정이 영원히 불가능하다.

---

여러 프로퍼티의 플래그 변경하기

 

Object.defineProperties를 사용하여 여러 프로퍼티의 플래그를 변경할 수 있다.

 

Object.defineProperties(user,{
    name:{value:"foma",writable:true,enumerable:false,configurable:true},
    age:{value:2,writable:true,enumerable:false,configurable:true}
})

---

객체 수정을 막아주는 다양한 메서드

 

프로퍼티 플래그 외에도 객체 수정을 막아주는 다양한 메서드들이 있다.

 

Object.preventExtensions(user) //새로운 프로퍼티 추가 불가
Object.seal(user) //새로운 프로퍼티 추가나 기존 프로퍼티 삭제를 막아줌
Object.freeze(user) //새로운 프로퍼티 추가,기존 프로퍼티 삭제,수정을 막아줌
Object.isExtensible(user) //새로운 프로퍼티를 추가하는게 불가능한지 여부를 알려줌
Object.isSealed(user) //프로퍼티가 추가,삭제가 불가능하고 모든 프로퍼티가 configurable:false인지 알려줌
Object.isFrozen(user) //프로퍼티 추가,삭제,변경이 불간으하고 모든 프로퍼티가 configurable:false,writable:false인지 알려줌

---

Reference

 

모던 JavaScript 튜토리얼