깊은 복사(Deep Copy) 와 얕은 복사(Shallow Copy)

🪴 이론적 개념

깊은 복사(Deep Copy)

'실제 값'을 새로운 메모리 공간에 복사하는 것

얕은 복사(Shallow Copy)

'주소 값'을 복사하는 것

---

🪴 예시

// 깊은 복사
let deepCopy = [...arr1];
deepCopy[0] = 42;

console.log(arr1);         // [99, 2, 3] (원본 배열은 영향 없음)
console.log(deepCopy);     // [42, 2, 3] (깊은 복사본에서만 값이 변경됨)

// 기존 값에 영향을 끼치지 않는다.

// 얕은 복사
const hyun = {
  name: "구현",
  age: 23,
};

let hyunCopy = hyun;  // hyunCopy에 hyun 값 복사
hyunCopy.age = 24;  // hyunCopy 값 변경

cosole.log(hyun);  // {name: "구현", age: 24}
cosole.log(hyunCopy);  // {name: "구현", age: 24}

// 기존 값에 영향을 끼친다.

왜 어떤 경우에는 원본 값이 불변하고 또 다른 경우에는 원본값이 변하는가?

첫번째 경우는 원시값을 변경한 경우이고 두번째 경우는 참조값을 변경한 경우이기 때문이다.

---

🪴 Value & Reference type

원시값, 참조값, 실제 값, 주소 값은 무엇인가,,

모든 데이터 타입은 값 타입(value type) 또는 참조 타입(reference type) 을 가진다.

자바스크립트에서 값은 원시 타입 (= 값 타입) 과 참조 타입 두 가지 데이터 타입의 값이 존재한다.

원시 타입 / 값 타입(Value type)

• 기본 자료형(단순한 데이터)을 의미한다.
• 변수에 원시값을 저장하면 변수의 메모리공간에 실제 데이터 값이 저장된다.
• javascript에서 Number, String, Boolean, Null, Undefined, Symbol 등이 해당 타입에 속한다.

참조 타입(Reference type)

• 자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다.
• 참조형은 원시형 데이터의 집합이다. 따라서 참조 자료형은 기존에 고정된 크기의 보관함이 아니다.
• 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다.
• 변수에 참조 자료형을 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를 저장하게 된다.
• javascript에서 Object, Array, function 등이 해당 타입에 속한다.

---

🪴 얕은 복사(Shallow Copy)가 필요한 이유

const hyun = {
  name: "구현",
  age: 23,
  .
  .
  .
};

let hyunCopy = {
  name: "구현",
  age: 23,
  .
  .
  .
};

//  let hyunCopy = hyun;

객체의 각각의 속성을 메모리에 할당하는데에 걸리는 시간이 존재한다.

따라서 hyun 의 값을 할당하는 시간과 hyunCopy 에 hyun 의 값을 복사하는데에 걸리는 시간이 각각 발생하므로 비효율적이다.

즉 hyunCopy 에는 참조(주소)값을 할당하여 시간을 단축시킬 수 있다.

---

🪴 깊은 복사(Deep Copy)가 필요한 이유

복사를 하는 목적은 기존 객체의 값만 복사본으로 가져와 별도로 활용하기 위함이 대부분이기 때문에 원본의 값이 변하지 않도록 하기 위해 깊은 복사가 필요하다.

const hyun = {
  name: "구현",
  age: 23,
  .
  .
  .
};

let hyunCopy = { ...hyun };