우선 자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분한다.
여기서 기본형과 참조형의 구분 기준은 값의 저장방식과, 불변성 여부이다.

💡 기본형과 참조형의 구분 기준

• 복제의 방식
  - 기본형 : 값이 담긴 주소값을 바로 복제
  - 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
• 불변성의 여부
  - 기본형 : 불변성을 띔
  • 참조형 : 불변성을 띄지 않음

여기서 불변성을 띈다는 말은 메모리와 데이터에 대한 내용으로 이해를 해야한다.

🪨 불변성

• 가변성 / 불변성을 구분하려면 데이터영역을 확인하면 된다.
• 상수 / 변수를 구분하려면 변수영역을 확인하면 된다.

불변성을 이해하기 위해서는 메모리와 데이터에 관해 이해를 해야한다.

🧠 메모리, 데이터

• 비트
  - 컴퓨터가 이해할 수 있는 가장 작은 단위
  - 0과 1을 가지고 있는 가장 작은 단위들이 모여 메모리가 만들어 지는것.
• 바이트
  - 8개의 비트를 묶어둔 새로운 단위
• 메모리 : byte 단위로 구성
  - 모든 데이터는 byte단위의 식별자인 메모리 주소값을 통해 서로 구분한다.

📇 변수 선언과 데이터 할당

// 선언과 할당을 풀어 쓴 방식
let str; 
str = 'test';
// 선언과 할당을 붙여 쓴 방식
let str = 'test';

주소	데이터	주소	데이터
1002	str / @5002	5002	'test'
1003		5003
1004		5004

❗️❗️❗️앞으로 임의로 1000번대 주소는 변수의 영역 5000번대의 주소는 데이터 영역이라고 선언을 해두겠다 ❗️❗️❗️
값을 바로 변수에 대입하지 않는 이유는 다음과 같다.

자유로운 데이터 변환
✅ 이미 대입한 문자열의 길이가 길어지게 된다면 이후 주소값에 있는 데이터들을 다 뒤로 미뤄야 한다는 문제가 생긴다.
ex) 1003번 주소를 이미사용중이라고 할때 1002번 주소에 문자열데이터 까지 같이 넣었는데 데이터가 길어져서 다음 주소를 할당받으려면 1003번 주소는 1004번으로 ... 모든 주소가 밀리게 된다.

✅ 또한 같은 데이터를 여러개의 변수에 대입한다고 가정을 해본다면 데이터 주소는 하나만 필요하고 변수를 저장하는 주소만 여러개 있으면 된다. 일반적으로 데이터가 변수를 저장하는 주소의 보다 메모리(바이트)를 많이 가져가기 때문

👀 기본형 데이터와 참조형 데이터

지금까지는 기본형 데이터와 참조형 데이터를 이해하기 위한 설명이었다..😅

기본형 데이터에는 Number / String / Boolean / null / undefined / Symbol 등이 있다. 참조형 데이터에는 Array / Function / Date / RegExp / Map, WeakMap / Set, WeakSet등이 있다.

👓 기본형 데이터

메모리를 기준으로 변수(let)와 상수(const)를 나누는 방법은 ➡️ 변수영역의 메모리를 변경할 수 있으면 변수 변수영역의 메모리를 변경할 수 없으면 상수라고 할 수 있다.

// 'abc'라는 값이 데이터 영역의 @5002 주소에 들어갔다고 가정을 하고 선언
let a = 'abc';
// 여기서 @5002 주소에 'def'라는 값의 데이터가 추가 된것이 아니라, 
//@5003에 'abcdef'라는 값이 생기고 
// 변수 a는 @5002 ➡️ @5003주소로 변한것일 뿐이다. 뿐
a = a + 'def'; // a = 'abcdef'
// 즉, 변수 a는 불변하다. 라고 할 수 있는것
// 이 때, @5002는 더이상 사용되지 않기 때문에 가비지컬렉터의 수거 대상이 된다. 

⬆️ 위 코드의 설명처럼 데이터 주소에 있는 값이 직접적으로 변한것이 아닌 새로운 주소에 데이터가 생성되고 그 주소값을 변수에 보내준것이기 때문에 변수 a는 불변한 것이다. ➡️ 그렇다는 말은 변수 a는 기본형 데이터 인것이다.

🥽 참조형 데이터

let obj1 = {
  a: 1,
  b: 'bbb',
}

⬆️위 코드에서 메모리 테이블을 본다면 ⬇️ 아래와 같다.

주소	데이터	주소	데이터	주소	데이터
1002	obj1/@7003~@7004	5002	1	7103	a/@5002
1003		5003	'bbb'	7104	b/@5003
1004		5004		7105

데이터 주소(@5000번대)에는 객체의 value값을 넣어주고, Obj1별도 주소(@7000번대)에는 key값과 value값이 있는 주소를 넣어준다. 그리고 객체의 key값과 value값 주소가 있는 주소를 변수 주소(@1000번대)에 넣어주는것이다.
기호로 @{안에 있는것은 다른 주소에 저장된 값이라고 가정을 해보겠다.}
➡️ { obj1식별자 @{ 객체Key @{ Value }}}
이런 식으로 표현할 수 있을것 같다.

obj1.a = 2; // 데이터를 변경한다면

⬆️⬆️위에있는 메모리 주소 테이블에서 @5004에 2라는 데이터가 들어가고 그에 따라 @7001번에 있던 데이터가 a/@5004로 변경이 될 것이다.
여기에 적어두었던 것처럼 데이터영역인 @7000번대 주소에 변경이 생겼기 때문에 불변하지 않다 (가변하다). ➡️ 그렇기에 Object는 참조형 데이터인 것이다.

📚 중첩객체의 할당

let obj = {
  x: 3,
  arr: [3, 4, 5],
}

주소	데이터	주소	데이터	주소	데이터	주소	데이터
1002	obj/@7103~7104	5002	3	7103	x/@5002	8103	0/@5002
1003		5003	4	7104	arr/@8103~8105	8104	1/@5003
1004		5004	5	7105		8105	2/@5004

중첩객체의 경우 기존 객체에 할당하던 방식에서 @8000번대(임의의 주소)의 주소를 할당하여 데이터를 처리해주는 것을 알 수 있다.

🖨️ 복사이후 값 변경

⬆️위 그림에서 설명 한것 처럼 기본형 변수를 복사하면 서로 다른 값이 생성되어 각 변수에 영향이 없지만, 참조형 변수를 복사시 서로 같은 주소를 바라보고 있기 때문에 영향이 간다. 그렇다면 참조형 변수를 영향이 가지 않게 복사를 하고 싶다면 재선언을 해줘야한다.

💡 참조형 데이터가 가변값이라고 할 때의 가변은 참조형 데이터 자체를 변경할 경우가 아니라, 그 내부의 프로퍼티를 변경할 때 성립한다고 할 수 있다.

☠️ 불변 객체

💡 객체의 속성에 접근해서 값을 변경하면 가변이 성립했다. 하지만 개발을 하다 보면 기존 객체는 변하지 않고(즉, 불변) 복사한 객체의 값만 변하도록 구현을 해야하는 경우가 생긴다. 이때 얕은 복사와 깊은 복사의 개념이 있다.

💦 얕은 복사

다음은 얕은복사를 하는 패턴이다.

// copyObj라는 함수에 객체가 들어오면
let copyObj = function (target) {
  let  result = {};
  // for in을 돌린다. ( for in문은 객체에 직접 참조할 수 있기 때문에 사용)
  for(const prop in target) {
    // result객체 안에 target(매게변수로 내려준 객체)의 값들을 저장
    result[prop] = target[prop]
  }
  return result
}

⬆️위 코드처럼 얕은복사를 사용하면 불변객체를 생성 할 수 있다. 처음 생성했던 obj1 과 얕은복사를 통해 반환된 obj2 는 서로 다른 주소를 갖을 수 있게 된것이다. obj2.value를 변경하면 obj1 === obj2 라는 조건에서 false를 반환한다.

하지만 완벽해보이는 얕은 복사에도 문제점이 존재한다. 얕은복사는 말 그대로 for in을 이용해 객체를 한번만 순환하는 구조이기 때문에 중첩 객체의 경우에는 불변객체의 특성을 갖지 못한다.

🌊 깊은 복사

깊은 복사는 위에서 설명했던 문제점들을 보완할 수있도록 재귀적 수행을 하는것이다.

var copyObjectDeep = function(target) {
	var result = {};
	if (typeof target === 'object' && target !== null) {
      // target이 객체상태로 존재하거나 비어있지 않다면
		for (const prop in target) {
          // forin으로 target을 참조한다.
			result[prop] = copyObjectDeep(target[prop]);
          // copyObjectDeep() 로 참조한 값을 넣어준다.
          // 이때, target[prop]에 객체가 아닌 경우는 아래 else문을 실행하게 된다.
		}
	} else {
		result = target;
	}
	return result;
  // 이렇게 된다면 중첩 객체 까지 불변객체로 복사가 가능하다.
}

🙌 JSON을 이용한 깊은복사

JSON을 이용하여 깊은 복사를 할 수도 있다.

😅 하지만 이 방식에도 문제는 존재한다. 중첩 객체에서는 순환참조를 할수 없으며, 함수나 undefined와 같은 속성값은 복사되지 않는다.
👀 그렇기 때문에 구조가 간단하고, 함수나 undefined와 같은 속성값이 없는 경우에 적합한 방식이다. 만일 객체의 구조가 복잡하거나 순환 참조가 있는 경우에는 다른 깊은 복사 방법을 사용해야한다.

사용방법은 무척 간단하다. JSON.stringify() 함수를 사용하여 객체를 문자열로 변환하고, 다시 JSON.parse()함수를 사용하여 새로운 객체를 생성한다.