[JavaScript] 배열 복사하는 법 (얕은 복사 & 깊은 복사)

자바스크립트에서 기존 배열을 복사해서 새로운 배열을 만들어야 할 때가 있습니다.

 

이때 단순히 '='를 사용하게 되면 새로운 배열을 변경했을 때 기존의 배열도 변경되는 문제가 발생합니다.

arr = [1,2,3];
arr_new = arr;

arr_new[2] =4;
console.log(arr,arr_new);
//출력 [1,2,4] [1,2,4]

 

그 이유는 arr과 arr_new 모두 동일한 객체를 가르키기 때문입니다. 

'='을 사용하게 되면 복사가 아닌 참조가 됩니다!

 

이를 해결하기 위한 방법은 무엇이 있을까요?

정말 다양한 방법으로 복사가 가능합니다.😊

이때 다차원 배열을 복사할 수 있는지 없는지에 따라 얕은 복사와 깊은 복사로 나눌 수 있습니다. 

 

[얕은 복사와 깊은 복사]

 

먼저 얕은 복사가 뭔지 깊은 복사가 뭔지 알아보겠습니다. 

1.얕은 복사(shallow copy)

let arr = [1,[2,3]];
let arr_new = [...arr];

arr[0] = 0;
arr[1].push(4);

console.log(arr,arr_new);

//출력 〉[ 0, [ 2, 3, 4 ] ] [ 1, [ 2, 3, 4 ] ]

얕은 복사는 리스트 내에 리스트 값이 변경될 경우 arr, arr_new 모두 변경됩니다.

따라서 다차원 배열 복사에는 적합하지 않습니다. 

 

 

2. 깊은 복사(deep copy)

//출력 〉[ 0, [ 2, 3, 4 ] ] [ 1, [ 2, 3 ] ]

깊은 복사는 다음 출력 같이 리스트 내에 리스트 값에 서로 간의 영향이 없습니다. 

따라서 다차원 배열 복사를 할려면 깊은 복사를 해야 합니다. 

 

 

 

이제 배열을 복사하는 다양한 방법을 알아보겠습니다. 

 

[얕은 복사]

spread 연산자(...) 

Spread 연산자를 사용하여 배열을 복사할 수 있습니다.

let arr = [1, 2, 3];
let arr_new = [...arr];

arr_new[0] = 0;

console.log(arr);   // [1, 2, 3]
console.log(arr_new);   // [0, 2, 3]

 

map() 함수 

map() 함수는 배열에서 사용할 수 있는 함수로 배열의 모든 요소를 순회하여 새로운 배열을 반환합니다.

map() 함수 내에 반환값을 일치시키면 얕은 복사가 가능합니다.

let arr = [1, 2, 3];
let arr_new = arr.map((element) => element);

arr_new[0] = 0;

console.log(arr); // [1, 2, 3]
console.log(arr_new); // [0, 2, 3]

 

filter() 함수

filter() 함수는 조건을 만족하는 요소를 모아 새로운 배열로 반환합니다. 

필터의 조건을 true로 설정하여 복사가 가능합니다.

let arr = [1, 2, 3];
let arr_new = arrA.filter(() => true);

arr_new[0] = 0;

console.log(arr); // [1, 2, 3]
console.log(arr_new); // [0, 2, 3]

 

 

slice() 함수 

slice() 함수는 시작 위치를 설정하여 특정 위치까지 배열의 복사본을 생성합니다. 

slice() 함수에 인자로 0을 넣어 0부터 마지막 요소값까지 복사하게 됩니다.

let arr = [1, 2, 3];
let arr_new = arrA.slice(0);

arr_new[0] = 0;

console.log(arr); // [1, 2, 3]
console.log(arr_new); // [10, 2, 3]

 

from() 함수 

from() 사용해 기존 배열의 얕은 복사를 할 수 있습니다. 

let arr = [1, 2, 3];
let arr_new = Array.from(arr_new);

arr_new[0] = 0;

console.log(arr); // [1, 2, 3]
console.log(arr_new); // [0, 2, 3]

 

[깊은 복사]

JSON.parse() 함수 및 JSON.stringify() 함수

-깊은 복사를 통해 다차원 배열을 정상적으로 복사할 수 있습니다.

-JSON.stringify() 함수로 원본 배열을 문자열로 변환한 후 

JSON.parse() 함수로 JavaScript Object로 파싱 합니다.

 

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

arr_new[0][0] = 0;

console.log(arr);  // [[1, 2, 3], ['A', 'B', 'C']]
console.log(arr_new);  // [[0, 2, 3], ['A', 'B', 'C']]