[JS] 깊은 복사(Deep Copy) VS 얕은 복사(Shallow Copy)

깊은 복사와 얕은 복사의 차이에 대해서 알아보겠습니다

🍀 깊은 복사(Deep Copy)

'실제 값'을 새로운 메모리 공간에 복사하는 것
-> 객체가 복사되어 아예 새로운 값이 생성된다

🍀 얕은 복사(Shallow Copy)

'주솟값'을 복사하는 것
-> 주솟값이 같고, 기존 값을 참조한다

---

더 자세히 예시를 통해 알아보겠습니다

let person = {name: 'kimi', age: 20}

let person2 = {...person} // 깊은 복사
let person3 = person // 얕은 복사
console.log(person2);
console.log(person3);

person2 와 person3를 console.log하면,
아래처럼 결과 값이 동일하게 나옵니다

// 결과 값
{ name: 'kimi', age: 20 }
{ name: 'kimi', age: 20 }

🤔 그렇다면, 왜 굳이 {...person}을 쓰는 걸까?

---

둘의 차이점을 알아보기 위하여
person2와 person3의 값을 비교하여 출력해보겠습니다

let person = {name: 'kimi', age: 20}

let person2 = {...person} // 깊은 복사
let person3 = person // 얕은 복사
console.log(person2);
console.log(person3);

// 비교
console.log(person==person2); // false
console.log(person==person3); // true

위의 내용을 console.log하면,
결과값이 false와 true로 각각 다르게 출력됩니다

---

person2의 경우, 새로운 메모리 공간에 값을 복사하여 값을 생성하는 것이므로 내용은 같지만 아예 다른 객체가 됩니다 --> 깊은 복사

깊은 복사는 원본 객체와 독립적이므로, *다형성 을 부여하거나 재정의 할 수 있습니다

*다형성(polymorphis): 하나의 객체가 여러 가지 타입을 가질 수 있는 것

그러나 person3의 경우, 주솟값이 같고 기존값을 참조하는 것이므로 같은 객체가 됩니다 --> 얕은 복사

얕은 복사는 원본 객체에 종속적이므로, 복사한 객체의 값이 변경되면 기존 객체의 값도 변경됩니다

---

이를 활용하여 기존값에 추가도 가능합니다

let person = {name: 'kimi', age: 20}

// height: 170 추가
let person2 = {...person, height: 170} 
console.log(person2);

// 결과값
{ name: 'kimi', age: 20, height: 170 }

---

또한 값을 바꿀 수도 있습니다

let person = {name: 'kimi', age: 20}

let person2 = {...person, name: 'hajin'} 
console.log(person2);

// 결과값
{ name: 'hajin', age: 20 }

이렇게 같은 키 값을 입력 시, 값 변경도 가능합니다

---

객체를 복사한 후 가져다 쓸 수도 있습니다

let a = [100, 200, 300]
let b = [...a, 400]
let c = [...a, ...b]
console.log(c)


// console.log(c)의 결과 값
[
  100, 200, 300, // ...a값 출력
  100, 200, 300,
  400 			// ...b값 출력
]