2022-05-18 TIL 항해 10일차 (원시형과 참조형, 불변 객체)

 

#1. 원시형과 참조형

자바스크립트의 데이터 타입은 크게 원시형 타입과 참조형 타입으로 나뉜다

자바스크립트 데이터 타입은 크게 두가지인 원시형(Primitive Type)과 참조형(Reference Type)으로 분리됩니다.

기본(원시)형에는 Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가됩ㄴ디ㅏ.

참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있으며,

ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가되었습니다.

 

원시형과 참조형의 가장 큰 차이점은 기본형에는 바로 값을 그대로 할당한다는 것이고, 

참조형에는 값이 저장된 주소값을 할당(참조)한다는 것입니다.

이것을 다른 표현으로 원시형 타입은 깊은 복사(deep copy) , 참조형 타입은 얕은 복사(shallow copy)가 일어난다고 보면됩니다.

실제 메모리에 저장되는 자세한 방식은 아래 주소의 글 참고

https://webclub.tistory.com/638

JS Basics #1 - JS 기본형과 참조형 차이점 정리

 

#2. 불변 객체

불변 객체란 '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 것을 의미한다.

JS에서 불변 객체를 만드는 방법은 const 와 Object.freeze() 을 이용하는 것 이다.

먼저 각각만 사용하면 어떻게 되는지 알아보자.

 

*const를 사용한 불변 객체

const obj = {};

obj.name = 'marry';

console.log(obj);   // {name : marry}

 

const 로 선언된 obj 변수에는 객체의 속성은 변경가능하다.

아래 예시를 보자

 

const obj = { name : 'marry'} 

obj = {name : 'bob'} // Uncaught TypeError: Assignment to constant variable.

 

const 로 선언된 obj 변수에는 재할당이 불가능하다.

 

즉 , 재할당은 불가능하지만 객체의 속성은 변경이 가능하다.

재할당이 불가능 한 이유 : 변수와 객체 사이의 바인딩 자체가 변경이 되기 때문에 상수인 obj변수는 재할당이 불가능했던 것

객체의 속성이 변경가능 한 이유 : 실제 객체가 변경은 되지만 { name : 'bob' } 객체와 변수(obj)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능했던 것

 

*Object.freeze()를 사용한 불변 객체

let obj = {name : 'bob'}
Object.freeze(obj) //얼리기
obj.name = 'john'
console.log(obj) // {name : 'bob'}

콘솔창을 보면 객체의 속성 변경은 무시가 되었다.

 

let obj = {name : 'bob'}
Object.freeze(obj) //얼리기
obj = {age : 26}
console.log(obj) // {age : 26}

콘솔창을 보면 재할당은 가능하다

 

요약하자면 const를 써서 재할당 불가능하게 + Object.freeze() 써서 객체의 속성 변경을 불가능하게 하면 된다.

즉 const ,Object.freeze() 두개를 아래와 같이 같이 쓰면 된다.

const obj = {name : 'bob'}

Object.freeze(obj)

이렇게 되면 객체 obj 은 재할당도, 객체의 속성 변경도 불가능하게 된 불변 객체가 된 것이다.

 

그렇다면 우리는 불변 객체를 왜 만드는 것일까?

 

불변성을 지키는 것이 왜 중요한가요?
-코드의 가독성을 위해서 : 불변성을 지키지 않는다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고 , 그말은 즉 오류를 발생시키기 쉽기 때문이다.