[JavaScript] 2차원 배열 깊은 복사하기

1차원 배열의 경우는 스프레드 연산자를 통해서 아래와 같이 배열을 새로 복사할 수 있었다.

let arr=[1,2,3];
let arr2=[...arr];
arr2.push(4);
arr2[1]=10;

// 두 배열이 다르게 출력됨
console.log(arr); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 10, 3, 4 ]

스프레드 연산자를 통한 복사는 사실 얕은 복사이다. 얕은 복사는 한 단계까지만 복사한다. 항상 배열이나 객체가 생성이 되기 때문에 그 자체는 다른 것으로 평가되지만, 그 내부에 중첩되어있는 요소들은 같은 것으로 평가된다. 따라서 2차원 배열의 경우에는 의도한 대로 복사되지 않는 것을 확인할 수 있다. 2차원 배열을 깊은 복사하고 싶다면 아래와 같이 각 행마다 스프레드 연산자를 적용해주면 된다.

let arr=[[1, 2, 3], [4, 5, 6]];
let arr2=[...arr];

arr2[1][1]=77;

// 의도한 대로 동작하지 않음( 두 배열이 같은 것으로 평가됨 )
console.log(arr); // [ [ 1, 2, 3 ], [ 4, 77, 6 ] ]
console.log(arr2); // [ [ 1, 2, 3 ], [ 4, 77, 6 ] ]

-------------------------------------------------------------

let arr=[[1, 2, 3], [4, 5, 6]];
let arr2=arr.map(d=>[...d]);

arr2[1][1]=77;

// 의도한 대로 동작함( 두 배열이 다른 것으로 평가됨 )
console.log(arr); // [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]
console.log(arr2); // [ [ 1, 2, 3 ], [ 4, 77, 6 ] ]