참조, 얕은 복사, 깊은 복사

const a = [];
const b = 'hello';
const c = {};
const arr = [a, b, c];

const arr1 = arr; // 참조
arr1[1] = 'hi'; // arr = [[], 'hi', {}]

const arr2 = [...arr]; // 얕은 복사
arr2[1] = 'babo'; // arr = [[], 'hi', {}]
arr2[0].push(1); // arr = [[1], 'hi', {}];

const arr3 = JSON.parse(JSON.stringify(arr)); // 깊은 복사
arr3[0].push(2); // arr = [[1], 'hi', {}];

얕은 복사

얕은 복사는 겉의 껍데기만 복사한다!
문자열, 숫자, boolean, null 등은 원시값이므로 참조의 개념이 사용되지 않고,
a, b는 각각 배열, 객체 이므로 참조가 된다.

배열의 경우 [...배열], 객체의 경우 {...객체} 처럼 사용하여 얕은 복사를 할 수 있다.

const array = [{ j: 'k' }, { l: 'm' }];
const shallowCopy = [...array]; // 얕은 복사

console.log(array === shallowCopy); // false
console.log(array[0] === shallowCopy[0]); // true

위의 코드를 보면 겉 껍데기는 복사가 이루어지지만, 내부의 객체는 참조가 이루어진다는 것을 알 수 있다.

깊은 복사

내부의 객체도 참조를 끊어주고 싶을 때 깊은 복사를 사용한다.

대부분의 경우 얕은 복사 만으로도 충분하지만, 객체 안에 객체가 들어있는 경우 등은 깊은 복사가 필요하다!

간단한 예제

const a = 'b';
const c = ['d', true, 1];
const e = { g: 'h' };
const i = [{ j: 'k' }, { l: 'm' }];
const n = { o: {p: 'q' }};

// a
let a1 = a;
a1 = 'c';
console.log(a, a1); // 'b', 'c' (원본의 값은 바뀌지 않음)

// c
let c1 = [...c]; // 객체 안에 객체가 들어있는 형태가 아니므로 얕은 복사만 해도 됨

// e
let e1 = {...e};

// i
let i1 = JSON.parse(JSON.stringify(i)); // 객체 안에 객체가 있으므로 깊은복사

// n
let n1 = JSON.parse(JSON.stringify(n)); // 마찬가지로 객체 안에 객체가 있는 형태임