💡 배열 복사

1. 얕은 복사

객체의 참조값(주소 값)을 복사(기존 값에 영향 O)

2. 깊은 복사

실제 값을 복사하는 것(기존 값에 영향 X)

💡 얕은 복사방법

1. Spread 연산자

1차원 배열 깊은복사 O , 다차원배열 복사 X

let arrA = [1, 2, 3];
let arrB = [...arrA];

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

2. slice

1차원 배열 깊은복사 O , 다차원배열 복사 X

let arrA = [1, 2, 3];
let arrB = arrA.slice();

arrB[0] = 10;

console.log(arrA);
// [1, 2, 3]
console.log(arrB);
// [10, 2, 3]

🤔 new Array().fill([ ]) 사용시 주의점!!!

const arr1 = new Array(3).fill([]);

arr1[0][0] = 1;

console.log(arr1);  // [ [ 1 ], [ 1 ], [ 1 ] ]

예상한 값은 [ [ 1 ], [ ], [ ] ]이어야 하지만 fill은 얕은 복사로 값들을 채우기 때문에 채워진 빈 배열은 같은 주소를 띄고 있다. 그래서 0의 자리에 있는 배열에 1을 채워도 나머지 배열에 1이 추가된다.

---

💡 깊은 복사방법

JSON.parse() , JSON.stringify()

1차원 배열 깊은복사 O , 다차원배열 복사 O

let arrA = [[1, 2, 3], ['A', 'B', 'C']];
let arrB = JSON.parse(JSON.stringify(arrA));

arrB[0][0] = 10;

console.log(arrA);
// [[1, 2, 3], ['A', 'B', 'C']]
console.log(arrB);
// [[10, 2, 3], ['A', 'B', 'C']]