객체 프로퍼티

프로퍼티는 객체에서 키와 값으로 이루어진 데이터를 뜻한다.

프로퍼티 애트리뷰트(속성)는 말그대로 하나의 프로퍼티가 가지는 속성이다. 

자바스크립트 엔진은 프로퍼티를 정의할 때 이 애트리뷰트(속성)를 자동 정의한다. Object.getOwnPropertyDescriptor(프로퍼티참조변수, '프로퍼티이름')  메서드를 사용하면 propertydiscriptor객체를 반환. 해당 프로퍼티의 애트리뷰트의 정보를  보여준다.

 

titleDes = Object.getOwnPropertyDescriptor(game1, 'title');
console.log(titleDes);

------------------------------
결과
{ "value": "CartRider", "writable": true, "enumerable": true, "configurable": true }

game1객체의 title이라는 프로퍼티 키를 가지고 있는 데이터의 속성을 가져오는 코드이다.

보는 바와 같이 기본값은 전부 true값이다.

"value": "CartRider"  //해당 프로퍼티의 값 
"writable": true  	  //이 프로퍼티를 수정할 수 있는지
"enumerable": true 	  //프로퍼티의 열거 가능여부 false면 for...in문 같은 반복 사용불가
"configurable": true  //false일시 프로퍼티의 애트리뷰트(속성) 변경 및 프로퍼티 삭제 불가

 

Object.getOwnPropertyDescriptors(game1);

결과----------------------------
{ 
"title": { "value": "Diablo2", "writable": true, "enumerable": true, "configurable": true }, 
"year": { "value": 2004, "writable": true, "enumerable": true, "configurable": true }, 
"gener": { "value": "RPG", "writable": true, "enumerable": true, "configurable": true } 
}

Object.getOwnPropertyDescriptors(객체변수); 를 사용 시

객체 안의 모든 프로퍼티의 애트리뷰트 정보를 보여준다.

 

 

 

- 프로퍼티의 추가, 삭제

delete game1.title; //프로퍼티 삭제 

game1.name = 'starcraft'; //프로퍼티 추가

 

 

 

- 프로퍼티 애트리뷰트 값 정의

game2 = new Game('World Of Warcraft', 2004, 'RPG');
            
        Object.defineProperty(game2, 'gener',{
             value : 'MMORPG',
             writable : false,
             enumerable : false,
             configurable : false
        });
            
console.log(Object.getOwnPropertyDescriptors(game2));



------결과--------------------------------------------
{ 
"title": { "value": "World Of Warcraft", "writable": true, "enumerable": true, "configurable": true }, 
"year": { "value": 2004, "writable": true, "enumerable": true, "configurable": true }, 
"gener": { "value": "MMORPG", "writable": false, "enumerable": false, "configurable": false } 
}

Object.defineProperty(객체명, '프로퍼티명', {애트리뷰트}); 를 선언하여 프로퍼티의 애트리뷰트를 정의 할 수 있다.

애트리뷰트 세가지를 전부 false로 정의하고 출력해보면 적용된 것을 알 수 있다.

 

 

 

- 객체 변경 제한 함수

아래 세개지 함수를 사용하면 객체의 프로퍼티들에 대하여 변경을 제어할 수 있다.

Object.preventExtensions(객체명); //프로퍼티 추가만 불가

Object.seal(객체명); //프로퍼티 읽기 쓰기만 가능

Object.freeze(객체명); //프로퍼티 읽기만 가능

 

 

 

- 객체 변경 제한 함수 사용 시 주의점

//platform프로퍼티 추가.. 값은 객체.
game2.platform = {
     first : "pc",
     second : "console"
}; 
           
Object.freeze(game2);

game2.platform.second = ""; //freeze 적용 안됨. 값이 변경됨.
delete game2.platform;  //freeze적용되어 삭제안됨.
delete game2.platform.first; //프로퍼티 값이 객체라면 freeze적용 안됨. 그러므로 삭제됨.


-------------------결과----------------------------------------------------------------
{ 
"title": { "value": "World Of Warcraft", "writable": false, "enumerable": true, "configurable": false }, 
"year": { "value": 2004, "writable": false, "enumerable": true, "configurable": false }, 
"gener": { "value": "MMORPG", "writable": false, "enumerable": true, "configurable": false }, 
"platform": { "value": { "second": "" }, "writable": false, "enumerable": true, "configurable": false } 
}

game2 객체 변수에 platform을 추가했고 그 값은 객체다.

그리고 Object.freeze함수로 이 game2객체에 대하여 읽기만 가능하도록 제한하였다.

 

platform의 값으로 존재하는 객체의 프로퍼티를 수정하거나 삭제하려고 하면 freeze가 적용되지 않아서 수정되고 삭제된다.

결과적으로 프로퍼티안에 있는 값이 객체라면 해당 변경제한함수가 적용되지 않는다.

platform안의 객체에 대하여 변경제한을 하려면 아래와 같이 명시적으로 선언해줘야 한다.

Object.freeze(game2.platform);