Javascript 객체와 불변성, 깊은복사

1. 기본형(Primitive Type)과 참조형(Reference Type) 데이터

 

기본형

 

Number
String
Boolean
null
undefined

 

참조형

 

Object  - Array
             - Function

 

Object가 상위, 그 하위에 배열, 함수, 정규표현식, Map, Set 등이 있다.

( 여기서는 배열과 함수에 대해서만 기억하자.)

 

두 타입의 차이

 

기본형에는 값을 그대로 할당하고,
참조형에는 저장된 주소값을 할당한다.

 

2.객체를 원시형으로 변환하기

 

자바스크립트가 연산을 수행할 때, 형변환이 필요한 경우 자동으로 형변환을 시킨다.
이때의 기준값을 hint라고 하는데, hint는 간단히 말해서 목표로 하는 자료형 정도로 생각하자.
hint는 string, number, default로 총 3가지가 있다.

• "string" (문자열을 필요로 하는 연산)
• "number" (수학 연산)
• "default" (목표 자료형이 무엇인지 명확하지않을때 발생) - 발생 빈도는 매우 드물다.

• ToPrimitive
• Symbol.toPrimitive
• toString과 valueOf
• obj.toString()만 사용해도 '모든 변환’을 다 다룰 수 있기 때문에, 실무에선 obj.toString()만 구현해도 충분한 경우가 많ek.

참고자료:https://ko.javascript.info/object-toprimitive

 

3.불변객체를 만드는 방법

 

불변객체란?

 

원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입 은 변경 가능한 값(mutable value)이다.

불변객체란 이와는 반대, 말그대로 변경할 수 없는 객체를 말한다.

 

불변객체를 만드는 방법

 

Const

 

const로 만든 객체는 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

const A = {};
A.hello = 'hi';

console.log(A);  // {'hello':'hi'}

 

Object.freeze()

 

Object.freeze() 로 만든 객체는 객체의 속성 변경은 불가능하지만 재할당은 가능하다.

let A = {hello= 'hi'};

Object.freeze(A);

let으로 선언된 객체를 Object.freeze를 통해 동결된 객체로 만든다.

 

A.hello = 'Bye';

console.log(A) // {hello: "Bye"} -> Not Modified

그 후, 위와같이 변경하려는 시도는 무시된다,

 

그러나, 위에서 말했듯이, Object.freeze는 동결된 객체를 반환할 뿐 재할당을 허용한다.

hello의 value값으로 hi가 나오게 고정은 시켜주지만, 

Key값을 hello가 아닌 Bye로 갈아치운다면 변경이 가능하다는 것이다.

A = {'Bye': 'See you'};

console.log(A); // {'Bye': 'See you'}

 

const + Object.freeze

 

서로를 보완해줄수 있는 이둘을 함께 사용해 완전한 불변객체를 만들 수 있다.

 

const A = {
	'hello': 'hi'
};

Object.freeze(A);

 

선언할때 const로 한번, 그 후 .freeze로 한번 더 동결시켜준다면

위에서 언급한 약점들을 상호보완하는 완전한 불변객체가 완성된다.

 

4. 깊은복사와 얕은복사

 

깊은복사

 

데이터 자체를 실제값으로 복사한다.
원본과 복사된 두 객체는 완전히 독립적인 메모리를 차지한다.

 

얕은복사

 

데이터 자체를 복사하지 않고 주소값만 복사한다.

원본과 복사본은 같은 메모리를 가리킨다.

 

깊은복사와 얕은복사 하는 방법

 

https://hanamon.kr/javascript-shallow-copy-deep-copy/

https://bbangson.tistory.com/78