데이터의 값을 출력할 때 최초의 값에서 추가가 되거나 삭제가 이루어지는데 원본 데이터의 값에 바로 접근하여 사용하는 방법도 있지만 이와 같은 방법은 추후에 원본 데이터가 변경되었기 때문에 다양한 오류를 발생 시킬 가능성이 크다.
그래서 원본 데이터의 값을 복사하여 수정하는 방법을 사용하는 것이 좋은데 이럴 때 사용하는 것이 깊은 복사와 얕은 복사이다.

👩🏻‍💻 데이터 타입 기본형과 참조형

데이터 타입의 얕은 복사와 깊은 복사를 정리하기 이전에 기본형(원시타입 Primitive type)과 참조형(객체타입 Reference type)에 대해 알고 있어야 한다.
기본형에는 Number, BigInt, String, Boolean, null, undefined, Symbol 7개가 있고 그 외(function, array, object...) 나머지는 참조형이라고 보면 된다.
기본형 데이터는 모두 불변값이고 참조형 데이터는 설정에 따라 변경 불가능한 경우도 있고, 아예 불변값으로 활용하는 방법도 있다.

📌 깊은 복사(deep copy)

기본형(원시타입 Primitive type)의 값은 새로운 메모리 공간에 독립적인 값을 저장하기 때문에 깊은 복사가 된다. 그래서 기본형은 원본이 바뀌어도 복사본은 바뀌지 않는다.

let a = '배고파';
let b = a;
a = '배 안 고파';

console.log(a); // 배 안 고파
console.log(b); // 배고파

📌 얕은 복사(shallow copy)

참조형(객체타입 Reference type)은 객체를 복사할 때 해당 객체만 복사하여 새 객체를 생성하므로 얕은 복사가 된다. 복사된 객체는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조하므로 원본이 바뀌면 복사본도 같이 바뀐다.

let object1 = { workout: 'yoga', time: 60 };
let object2 = object1;
object1.workout = 'walking'

console.log(object1); // { workout: 'walking', time: 60 }
console.log(object2); // { workout: 'walking', time: 60 }

원본이 바뀌지 않는 얕은 복사를 하는 방법은 여러 방법이 있겠지만, 그중에 난 전개 연산자의 방법이 가장 좋다고 생각을 한다.

const a = [];
const b = '약과';
const c = {};

const arr = [a, b, c];
const arr2 = [...arr];
console.log(arr2); // [[], "약과", {}]

arr2[1] = '타코야끼';
console.log(arr[1]); // 약과
console.log(arr2[1]); // 타코야끼

이 코드를 보면 원본이 변경 안 된 것을 알 수 있다.