얕은 복사, 깊은 복사

값 복사

원시값을 복사

let a = 10;
let b = a;

console.log("[ Before ]")
console.log(a); // 10
console.log(b); // 10

b = 20;

console.log("[ After ]")
console.log(a); // 10
console.log(b); // 20

b는 a와 다른 메모리 공간에서 값만 복사했기 때문에 b의 값을 변경해도 a는 변화 없음

📝 그림으로 확인 https://velog.io/@thdgusrbek/원시-타입-객체-타입

---

참조 복사

배열 또는 객체를 복사하면 일어남 (같은 주소값을 가리키고 있기 때문)

const obj1 = {
   name: 'song',
   age: 26,
   hobby: {
      active: "football",
      inactive: 'OTT',
   }
};

const obj2 = obj1;

console.log("[ Before ]")
console.log(obj1)
console.log(obj2)

obj2.name = "kim"
obj2.age = 34

console.log('\n\n---------------------------------\n\n')

console.log("[ After ]")
console.log(obj1)
console.log(obj2)

obj2는 obj1과 같은 주소값을 참조하고 있기 때문에 참조된 값을 변경하면 ob1, obj2에 변화가 생김

그림은 이해를 위해 간소화, 실제로 객체값은 Heap영역에 저장된다.

📝 그림으로 확인 https://velog.io/@thdgusrbek/원시-타입-객체-타입

---

얕은 복사 (Shallow Copy)

• 새로운 배열 또는 객체를 만들어서 주소값을 가리키기 때문에 새로 생성된 배열 또는 객체 값을 변경해도 원본은 그대로임
• spread operator, Object.assign( ) 등을 사용

const obj1 = {
   name: 'song',
   age: 26,
   hobby: {
      active: "football",
      inactive: 'OTT',
   }
};

const obj2 = { ...obj1 };

console.log("[ Before ]")
console.log(obj1)
console.log(obj2)

obj2.name = "kim"
obj2.age = 34
obj2.hobby.active = 'baseball'
obj2.hobby.inactive = 'YouTube'

console.log('\n\n---------------------------------\n\n')

console.log("[ After ]")
console.log(obj1)
console.log(obj2)

새로운 공간에 객체를 만들기 때문에 값을 변경해도 원본은 변하지 않는다.
하지만, 아직도 객체 안에 객체는 원본과 같은 주소를 참조하기에 obj2.hobby.active, obj2.hobby.inactive을 변경하면 원본과 복사본이 같이 변한다.

---

깊은 복사 (Deep Copy)

• 중첩된 객체를 복사
• JSON.parse(JSON.stringify( )), Lodash의 clonedeep 메소드 등을 사용

const obj1 = {
   name: 'song',
   age: 26,
   hobby: {
      active: "football",
      inactive: 'OTT',
   }
};

const obj2 = JSON.parse(JSON.stringify(obj1));

console.log("[ Before ]")
console.log(obj1)
console.log(obj2)

obj2.name = "kim"
obj2.age = 34
obj2.hobby.active = 'baseball'
obj2.hobby.inactive = 'YouTube'

console.log('\n\n---------------------------------\n\n')

console.log("[ After ]")
console.log(obj1)
console.log(obj2)

---

출처

유튜브 @시코 - 시니어코딩 채널
https://www.youtube.com/watch?v=QFIfI8MIURQ