복사를 할 때 문제가 발생하는 경우는 대게 참조 자료형을 복사 할 때입니다.
참조자료형을 복사하는 방법에는 단순 대입 연산자를 사용하는 방법 외에 얕은 복사와 깊은 복사가 있죠. 이름에서 느낄 수 있듯이 얕은복사보다는 깊은 복사가 엄밀한 복사방법입니다. 얕은 복사는 복사가 잘되는 상황도 있지만 그러지 않는 예외가 있습니다.
1. 얕은복사
얕은 복사는 크게 두가지 특징을 보입니다.
- 얕은 복사는 참조 자료형 속 데이터들이 원시 자료형일 경우 복사가 잘 됩니다.
let a=[3,4,5];
let b=a.slice(); //a를 slice를 이용해 얕은 복사하였다.
b[0]=19;
console.log(a[0]);이런 코드가 있을 때 화면에 출력된 a[0]값은 3입니다. 즉 b 값을 바꾸어도 a는 바뀌지 않습니다.
- 참조 자료형의 데이터가 참조 자료형일 경우 복사가 잘 안 됩니다.
let a=[[1,2,3],[4,5,6],[7,8,9]];
let b=a.slice();
b[0][0]=17;
console.log(a[0][0]);이 코드에서 화면에 출력된 a[0][0]값은 17입니다. b를 변경시키자 a도 따라 바뀝니다.
왜 이런 일이 발생하는걸까요??
-
왜 참조자료형의 데이터중 원시자료형은 복사가 잘되는 걸까??
얕은 복사를 하여 새로운 변수에 참조자료형을 할당하면 참조자료형을 새로운 메모리에 복사한 후 그에 상응하는 참조주소를 변수에 할당합니다. 즉, 참조주소도 다르고 그 참조주소가 가리키는 참조자료형도 다른 것이죠. 그래서 기존 참조자료형과 새로운 참조자료형이 서로 동기화되는 현상이 일어나지 않습니다. -
왜 참조자료형의 데이터중 참조자료형은 복사가 잘 안되는 걸까??
참조자료형의 데이터들 중 참조자료형이 있을 때에는 복잡합니다. 참조자료형을 새로운 메모리 주소에 복사를 했습니다. 그러한 공간을 heap이라고 하죠. heap의 메모리 공간에는 참조자료형 속 참조자료형을 가리키는 메모리 주소를 저장하는 공간이 있습니다. 그런데 얇은 복사를 하면 원소인 참조자료형에 대해서 이 메모리 주소를 그냥 복사만 할 뿐 새로운 참조자료형을 만들어 주지는 않습니다. 그래서 참조자료형의 요소중 참조자료형은 얇은 복사에서 제대로 복사가 되지 않는 것 입니다.
2.깊은복사
앞서 얕은 복사 부분을 잘 읽었다는 가정하에 깊은 복사를 설명하겠습니다. 얕은 복사와 비교해 깊은 복사의 차이점의 특징은 참조 자료형이 가리키는 객체의 element가 참조자료형이든 원시자료형이든 복사를 잘 한다는 것입니다. 예를 들어봅시다.
let a=[[1,2,3],[4,5,6],[7,8,9]];
let b=cloneArr(a);
b[0][0]=18;
console.log(a[0][0]);
console.log(b[0][0]);
function cloneArr(arr) {
const arrClone = [];
for (let item of arr) {
if (typeof item=== "object" && item != null) {
arrClone.push(cloneArr(item));
} else {
arrClone.push(item);
}
}
return arrClone;
}여기서 cloneArr함수는 참조자료형인 배열의 깊은복사를 하는 함수입니다. 복사하려는 배열안에 set이나 일반적인 객체가 있을 경우에는 작동을 잘 못 합니다. 하지만 일단은 참조자료형이 가리키는 객체에 참조자료형이 있는 경우의 깊은 복사를 보여주고는 있습니다.
여기서 b[0][0]의 값은 18이지만 a[0][0]의 값은 1 그대로입니다. 이유가 무엇일까요? 깊은 복사를 하면 참조자료형의 데이터들중 참조자료형이 있을 경우에 요소인 참조자료형을 새로운 메모리 주소에 복사합니다. 즉, 참조자료형 속에 참조자료형이 있어도 새로운 메모리에 완전히 복사를 해주는 것이죠. 그리고 깊은 복사는 참조자료형 속에 참조자료형이 몇중으로 겹쳐있든 상관없이 새로운 메모리에 복사하여 저장하기 때문에 참조자료형을 복사할 때 아주 좋습니다.
