[자바스크립트 javascript] 불변 객체를 만드는 방법

✅ 불변 객체를 만드는 방법

 

불변이란? 변하지 않는 것

불변 객체란? 변하지 않는 객체, 즉 이미 할당된 객체가 변하지 않는다는 뜻 

자바스크립트에서 불변 객체를 만드는 방법 : const, Object.freeze()

 

1️⃣ const 

 

ES6 문법부터 let과 const 를 지원한다.

변수를 상수로 선언할 수 있다. 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

 

ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌, 바인딩 된 값이 상수가 되는,

즉, test변수가 상수가 되기 때문에 const 키워드로 선언된 test 변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

 

const test = {}; test.name = "mingyo"; console.log(test) // {"mingyo"}

 

👌 재할당이 불가능한 이유

 

변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에, 상수인 test는 재할당이 불가능한 것.

 

 

👌 객체의 속성이 변경가능한 이유

 

실제 객체가 변경은 되지만 ({} -> name : "Mingyo") 객체와 변수 test 사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능한 것이다.

 

재할당은 불가능하나, 객체의 속성을 변경함으로써 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에, 불변객체라고 보기는 어렵다.

 

2️⃣ Object.freeze() 

 

객체를 동결하기 위한 메소드

 

test 변수에 key value를 가진 객체를 바인딩한 후, Object.freeze(test)를 사용해 바인딩된 변수를 동결 객체로 만든다.

 

let test = {    name : 'Kim' } Object.freeze(test)

 

동결 객체로 만들었기 때문에, test는 객체의 속성을 변경하는 시도는 불가능하다.

 

test.name = 'Jung' console.log(test) // {name : 'Kim'}

 

위처럼 객체의 속성을 변경하는 시도는 무시된다.

그러나, Object.freeze() 는 동결된 객체를 반환하지만, 객체의 재할당은 가능하다.

 

test = {    age : 15 } console.log(test) // {age : 15}

 

위와 같이 객체의 재할당은 가능하다. 때문에, Object.freeze()도 불변 객체라고는 할 수가 없다.

 

그렇다면?

 

3️⃣ const와 Object.freeze()의 조합을 통해 만드는 불변 객체

 

- const : 재할당 불가

- Object.freeze() : 객체속성 변경 불가

 

const test = {    'name' : 'Jung' } Object.freeze(test)

 

const로 바인딩된 변수를 상수화시킨 다음, Object.freeze()로 해당 변수를 동결 객체로 만들면

객체의 재할당과 객체의 속성 둘 다 변경 불가능한 불변 객체가 된다.

 

 

참고 : https://spiderwebcoding.tistory.com/8