본문 바로가기
Front-end/js

불변 Object 만들기

by somlang_bba 2021. 12. 22.
728x90

const obj = {
	a: 'a',
    b: 'b',
    c: 'c'
}

console.log(obj) // {a:'a',b:'b',c:'c'}

obj.a = 'b'

console.log(obj) // {a:'b',b:'b',c:'c'}

obj = {} // error : Uncaught TypeError: Assignment to constant variable.

 

자바스크립트의 const를 이용하면 일반적인 변수는 변하지 않는 정적인 상태가 된다.

하지만 객체의 경우 const로 선언하더라도 객체가 가지고있는 멤버 변수의 값은 변경을 할 수 있다.

 

let a = 'a'
console.log(a) // a

a = 'b';
console.log(a) // b

const b = 'b';

b = 'c'; // error : VM1061:9 Uncaught TypeError: Assignment to constant variable.

console.log(b) // 실행되지 않음.

 

이러한 현상을 막기위해서 Object.freeze라는 메서드를 제공한다.

const obj = {
	a: 'a',
    b: 'b',
    c: 'c'
}

Object.freeze(obj2)

obj.a = 'b';
obj.d = 'd';

console.log(obj) // {a: 'a', b: 'b', c: 'c'}

 

그리고 이렇게 불변의 상태인지를 검사할 수 있는 Object.frozen 메서드도 제공한다.

const frozen = Object.isFrozen(obj)

console.log(frozen) // true

 

또한 배열도 객체의 특성을 따르기 때문에 Object.freeze 메서드를 적용 가능하다.

 

하지만 동결된 객체 안에 있는 동결되지 않은 객체의 멤버변수에 대해서는 변경이 가능하기 때문에 완전한 동결은 Object.freeze 메서드만으로는 할 수 없다.(완전한 동결을 위해서는 탐색을 하면서 해당 멤버가 객체인지를 판별한 후 그 객체를 또다시 동결시키는 방법으로 로직을 짜야한다)

 

사실상 그렇게 자주 사용되는 메서드는 아니기 때문에 이런 메서드가 있다는 정도로 알아두면 될것 같다.

 

728x90

'Front-end > js' 카테고리의 다른 글

Javascript의 비동기 처리  (0) 2022.02.07
js 기본지식  (0) 2021.12.23
ArrayFunction3 (forEach)  (0) 2021.12.21
ArrayFunction 2 (find, filter)  (0) 2021.12.14
Array Function 1 (Map)  (0) 2021.12.13