JS - Objects 객체에 대한 모든 것 - 3

JS - Objects 객체에 대한 모든 것 링크

1. JS - Objects 객체에 대한 모든 것 - 1
2. JS - Objects 객체에 대한 모든 것 - 2
3. JS - Objects 객체에 대한 모든 것 - 3
4. JS - Objects 객체에 대한 모든 것 - 4
5. JS - Objects 객체에 대한 모든 것 - 5

 

JS - Objects 객체에 대한 모든 것

1 부터 ~ 5 까지 쭉 이어서 보는걸 권장한다.

 

 

개발을 진행하다 보면 어떤 객체는 값을 변경 안되게 즉, 상수처럼 사용하고 싶을 때가 있다. 

ES5 에서는 다양한 방법으로 객체에서 상수처럼 변경 안되게 처리할 수 있는 방식이 있다.

이 Object에 대해 공부한 내용을 또 남겨본다.

 

▶ 불변성

오브젝트 상수(Object constant)
→ Object.defineProperty(오브젝트, 속성, {객체의 데이터})
    writable:false와 configurable:false를 결합하여 객체 속성으로 본질적으로
    상수(변경, 재정의 또는 삭제할 수 없음)를 생성할 수 있다.

 

 참조 → https://knowing-passion.tistory.com/50

JS - Objects 객체에 대한 모든 것 - 2

 

이전 글에서  Object.defineProperty 에 관련해서 속성 중 writable과  configurable을 정리했었다.

writable을 false로 설정을 하면 값이 변경되지가 않는다.

configurrable을 false로 설정을 하면 delete 키워드로 속성 삭제를 하려고 해도 삭제가 안된다.

 

예)

var obj = {};

Object.defineProperty( obj, "FAVORITE_NUMBER", {
    value: 2,
    writable: false,
    configurable: false
} );

myObject.FAVORITE_NUMBER = 100;
console.log(myObject.FAVORITE_NUMBER); // 2

이처럼 두 개의 속성을 false로 설정하면 변경, 재정의를 못하는 성질을 같게 할 수  있다.

 

확장 방지 (prevent extensions)
→ Object.preventExtensions(객체)
    객체에 속성(프로퍼티)을 추가하지 못하게 하는 기능

객체에 새 속성이 추가되는 것을 방지할 수 있다.

var obj = {
    a: 2
};

Object.preventExtensions(obj);

obj.b = 3;
console.log(obj.b); // undefined

위 코드에서 보는 거와 같이 Object.preventExtensions() 이걸 사용하면 속성을 추가해도 추가가 안된다.

obj 객체에는 a라는 프로퍼티만 정의해놓고 Object.preventExtensions(obj)를 실행 뒤에

obj.b라는 새로운 속성을 추가하고 console.log을 찍어봤더니? undefined가 나왔다.

 

이처럼 Object.preventExtensions() 이것은 객체의 속성 추가를 안되게 막을 수 있다.

이것도 객체의 불변성에 속한다.

 

 

 

봉인된 객체로 만듦 (Seal)
→ Object.seal(객체)
    객체의 속성을 configurable:false로 설정한 객체로 만듦

var obj = { // a속성에 2 값을 넣고 obj 라는 객체를 만듬
    a: 2
};

Object.seal(obj); // 봉인된 객체로 만듬
obj.b = 10; // 새로운 속성 b를 추가함.
obj.a = 100; // 값은 변경이 가능.

console.log(obj.b); // undefined
console.log(obj.a); // 100

위 코드를 보면 Object.seal로 obj를 봉인된 객체로 만들었다. 즉, 이게 무슨 말이냐면,

이전 글에서 설명한 속성 설명자(Object.getOwnPropertyDescriptor(오브젝트, 속성))를 가지고 설명하겠다.

 

원래 처음 일반 객체 obj를 선언하면 아래 이미지에 나오는 것처럼 데이터 속성을 가진다.

 

Object.getOwnPropertyDescriptor(obj, "a");  결과 화면

obj 속성 a 설명자 console.log

 

일반 객체를 만들면 기본적인 세팅은 다 true 되어있다.

하지만 이것을 Object.seal(obj)을 실행하면 봉인된 객체로 만든다. 

 

Object.seal(obj);

Object.getOwnPropertyDescriptor(obj, "a");  결과 화면

 

obj 속성 a 설명자 console.log

 

즉, Object.seal을 사용하게 되면

1. 새로운 속성을 추가를 못하며
2. 기존 속성을 재구성하거나 삭제할 수도 없다.
3. 하지만, 기존 속성에 대해선 값은 변경 가능.

 

 

고정된 객체
→ Object.freeze(객체)
    객체의 속성 configurable:false와 writable:false로 설정한 객체로 만듦

var obj = { // a속성에 2 값을 넣고 obj 라는 객체를 만듬
    a: 2
};


Object.freeze(obj);

obj.b = 10; // b 라는 새로운 속성을 추가.
obj.a = 100; // a의 값을 변경함.

console.log(obj.a); // 2
console.log(obj.b); // undefined

Object.freeze를 실행하고 속성 설명자로 확인해보자.

 

obj 의 a 속성설명자 console.log

 

configurable:false와 writable:false의 false로 지정된 것을 확인할 수 있다.

 

즉, Object.freeze을 사용하게 되면

1. 새로운 속성을 추가를 못하며,
2. 기존 속성을 재구성하거나 삭제도 못하고
3. 기존 속성이 가지고 있는 값도 변경이 안된다.

 

이렇게 불변성에 대해서 공부를 했다.

 

각각 특징들이 있어서 자기 자신이 사용하고 싶은 것들을 알맞게 맞춰서 이용하면 될 것 같다.

지금 여러 가지 불변성에 대해서 알아봤는데 이런 생각을 가질 수도 있다.

 

굳이 귀찮게 저런 거 이용을 하냐? 

차라리 아래 코드처럼 Object.defineProperty로 설정해주면 되지 않냐?라고 얘기할 수 있다.

Object.defineProperty(obj, "a", {
    value:'2',
    writable:true,
    configurable:true,
    enumerable:true
});

 

그렇다 그렇게 해도 된다.

하지만 저렇게 일일 하나하나씩 속성마다 설정을 해주면 코드가 길어지니

깨끗하고 보기 좋게 코드를 하려면 불변성에 관련된 것들을 사용해도 나쁘지 않을 듯하다.