얕은 복사

• 바로 아래 단계의 값만 복사. 객체가 중첩된 구조일 경우 불변성을 지킬 수 없다.
• 참조형 데이터가 저장된 속성은 원본과 복사본이 같은 주솟값을 가진다.
• 따라서 🌟원본과 복사본 중 어느 한 쪽에서 참조형 데이터의 속성의 값을 바꿀 경우 다른 한 쪽도 같이 변한다.🌟
  (원시형 데이터가 저장된 속성은 복사 직후에는 같은 주솟값을 갖지만(같은 값이므로), 한 쪽의 값을 바꿔도 다른 쪽의 값은 그대로이다.)

얕은 복사를 수행하는 것들

• spread 문법 이용한 할당, slice(), Object.assign()

얕은 복사 예시: spread syntax로 할당하기

const obj1 = {
      name: 'kay',
      level: ['Lv1', 'Lv2']
    }

const obj2 = {...obj1} // 얕은 복사. 새로운 객체 할당. (obj1과 주솟값 다름.)

obj1 !== obj2 // true (obj1과 obj2는 서로 다른 주솟값을 가진다)
obj1.level === obj2.level // true (얕은 복사이기 때문에 참조형 데이터인 level은 같은 주솟값을 가진다.)
obj2.level[0] = 'Lv100' // obj2에서 참조형 데이터 Level의 속성의 값을 바꾸면
obj1.level[0] // 'Lv100' // obj1에서도 따라 변한다.

obj1.name === obj2.name // true // 원시형 데이터를 값으로 가진 속성 name도 일단은 서로 같은 주솟값을 가지지만
obj2.name = 'jane' // obj2에서 name의 값을 바꿔도
obj1.name // 'kay' // obj1에서는 따라 변하지 않고 원래 값 그대로이다.

---

깊은 복사

• 중첩 구조를 불변성을 지키며 복사.
• 복사 후 원본과 복사본 어느 한 쪽을 바꿔도 다른 쪽이 따라 변하지 않는다.

JSON.stringify 후 JSON.parse 하기

• JSON.stringify 를 활용해 데이터를 문자로 변형시키고 JSON.parse를 활용해 다시 문자를 객체 데이터로 변형시킨다.

const arr = [1, 2, [3, 4]];
const arr2 = JSON.parse(JSON.stringify(arr)); // 깊은 복사

arr[0] === arr2[0] // 🏝 원시형 데이터. 복사 직후에는 같은 값(`1`)을 가지므로 주솟값이 같다.  
arr[2] !== arr2[2] // 참조형 데이터. 깊은 복사를 했으므로 서로 다른 주소값을 가진다. 
arr[2][0] === arr2[2][0] // 🏝 원시형 데이터. 같은 값(`3`)을 가지고 있으므로 주솟값이 같다.  

---

🏝 참고: 복사 후의 주솟값

1. 복사한 객체 : 주솟값 다름

• 얕은 복사, 깊은 복사 모두 복사한 객체는 원본과 다른 주소값을 가진다.

2. 원시형 데이터를 가진 속성 : 🌟주솟값 같음🌟

• 얕은 복사, 깊은 복사 모두 복사 직후에는 원시형 데이터를 가진 속성의 원본과 복사본의 주솟값이 같다!!
• 그러나 속성의 값을 바꿀 경우 다른 쪽은 따라 변하지 않는다.
  (값이 같기 때문에 => 주솟값이 같은 것 / 같은 주솟값을 바라보는 참조형 데이터와 구분)

3. 참조형 데이터를 가진 속성 : 얕은 복사는 주솟값 같음, 깊은 복사는 주솟값 다름