깊은 복사와 얕은 복사

참고하기 싫으면 얕은 복사 or 깊은 복사

// 깊은 복사 특: 오른쪽이 바뀌면 왼쪽은 안바뀜
const monster1 = JSON.parse(JSON.stringify(monterList[0]));

// 참조 특: 오른쪽이 바뀌면 왼쪽도 따라서 바뀜, 둘이 연결돼 있음
const monster2 = monsterList[0]

얕은복사:

객체를 얕은 복사할 땐 객체 안에 넣어서

배열을 얕은 복사할 땐 배열 안에 넣어서

// 객체 얕은복사
const monster3 = { ...monster[0] }

//const arr = [ ...arr ]

얕은 복사와 깊은 복사의 차이

얕은 복사: 겉 껍데기만 복사, 내부는 참조, 겉 껍데기만 참조관계가 끊긴다

깊은 복사: 전부 참조 관계가 끊긴다

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

const arr = [a, b, c];

// 객체를 다른 변수에 넣으면 '참조'.
// 참조관계
const arr1 = arr;

arr1[1] = 'hi';
console.log(arr[1]); // 'hi'

const arr2 = [...arr];
arr2[1] = 'dumb';

// arr2[1]를 dumb로 바꿔도 arr[1]은 'hi'로 남아있다.
arr[1]; // 'hi'

// 얕은 복사의 문제점
// 문자열은 안 바뀌는데, 배열은 다른 하나를 바꾸니까 따라서 바뀜
arr2[0].push(1); // 1
arr[0]; // [1]

// 결론: 문자열, 숫자, bool, null, undefined 같은 원시값(객체가 아닌 값들)
// 은 참조가 없기때문에 복사가 가능

// a, c는 원시값이 아니기 때문에 참조가 가능
// [a, b, c] => 겉 껍데기는 복사가 되고, 내부 객체는 참조가 된다.

// 내부에 있는 객체마저도 참조관계를 끊고 싶으면 깊은 복사를 사용

// 가장 쉬운 깊은 복사 방법은
const arr3 = JSON.parse(JSON.stringify(arr)); // 만능 깊은 복사는 아니다(prototype에는 적용 안됨)
arr3[0].push(2); // 2
arr[0]; // 1 => 바뀌지 않는다.

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

// 깊은 복사는 보통 라이브러리를 사용한다.
// ex) lodash clone

// 슬라이스도 대표적인 얕은복사.

const reference = array; // 참조
const deepCopy = JSON.parse(JSON.stringify(array)); // 깊은복사
console.log(array === reference); // true
console.log(array[0] === reference[0]); // true
console.log(array === deepCopy); // false
console.log(array[0] === deepCopy[0]); // false

// 깊은 복사 quiz

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

// 원시값이기 때문에 다른 변수에 할당하면 깊은 복사가 된다.
const a1 = a;

// 배열 안에 값들이 원시값이면 slice얕은 복사를 해도 깊은복사가 된다.
const c1 = c.slice(); 
//or const c1 = [...c]

const e1 = { ...e }; // 객체 안에 객체가 없으니까 얕은복사로 가능
const i1 = JSON.parse(JSON.stringify(i));
const n1 = JSON.parse(JSON.stringify(n));

slice 메서드도 배열의 대표적인 얕은복사 
const shallowCopy = [ ...array ]
const shallowCopy = array.slice()

// concat 메서드도 얕은 복사 가능
const g = ['1']
g.concat(2, 3) // ['1', 2, 3]
g.concat() // ['1']