JavaScript 입문 : 참조(Referal), 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy) - 1

자바스크립트를 공부하면서 익혀야 될 이론이 참으로 많은 것 같습니다. 여러가지 메소드들을 접하면서 돌아서면 낯설은 느낌들이 많지만 이왕 시작한 공부 포기할 수는 없어 보입니다. 

 

오늘은 자바스크립트 용어(?) 혹은 메소드라고 볼 수 있는데요. 참조와 얕은 복사 그리고 깊은 복사라는 개념을 일부 알고 가도록 하겠습니다. 

 

우리가 지금껏 변수에 대입하던 행위들이 기본적으로 '참조'라고 보면 될 듯 합니다. 

 

다음을 예로 들면서 이해 하도록 하겠습니다. 

 

 

당연히 변수 a 가 참조하는 배열은 1, 2, 3입니다. 이럴 경우 a에 첫번째수를 원하는 숫자로 변경할 수 있으며 그 후 a는 변경된 숫자를 나타내게 됩니다. 

 

 

이럴 경우 굳이 내용을 표현하자면 변수 a 는 배열 1, 2, 3을 참조하고 있기때문에 언제나 참조값은 변할 수 있습니다. 

이러한 내용들을 사실 지금껏 적용하고 있었구요.

 

그런데 복사라는 개념이 등장하는데 게다가 얕은복사, 깊은복사라고 표현하니 조금은 당황스럽지만 좀 더 실용적으로 이해를 해 볼려고 합니다. 

 

여러 문헌에 따르는 정의가 있는데 얕은복사는 주소값을 복사하고 깊은복사는 실제값을 복사한다는 말도 있고 실질적으로 와닿지는 않습니다. 해서 예제를 가지고 정의를 별도로 내려야 겠습니다. 제로초에서 설명을 잘해 주셔서 도움을 받고 정리를 하도록 하겠습니다. 

 

배열, 문자, 객체를 각각 변수로 만들고 이 변수를 하나의 배열에 모은 후 각각의 복사를 해 보고자 합니다. 

 

 

상기 예문을 보면 당연히 arr 변수안에는 이미 선언되어 있는 a, b, c를 나타냅니다. 

 

얕은복사를 해 보겠습니다. 얕은복사는 점 세개를 앞에 붙힙니다. 이는 배열이나 객체나 마찬가지 입니다. 

 

const arr1 = [...arr];

 

얕은복사를 한 후 arr1의 문자를 바꾸어 보도록 하겠습니다. arr1은 shallow로 바뀌었지만 arr자체는 변하지 않았습니다. 이는 참조가 되지 않고 복사가 되었기에 문자열에는 변함이 없는겁니다.

 

얕은복사

 

만일 얕은복사를 하지 않고 참조를 하는 형태면 최초 arr도 바뀌게 됩니다.

 

참조

 

그런데 얕은복사는 배열이나 객체의 값은 변환을 시킵니다. 

 

 

따라서 얕은복사는 복사를 하는 객체형태가 배열형태면 배열형태를 복사하고 문자열은 복사한 값으로 새로운 변수에 적용되지만 원본 문자열은 변하지 않는 특성을 가지고 있습니다. 

 

이러한 부분들이 불편할 수도 있기때문에 깊은복사를 사용합니다. 

 

깊은복사에 대해 별도 다루는 시간이 있겠지만 JSON함수 메소드를 이용하면 원본에 손상이 가지않고 복사를 진행할 수 있습니다. 

 

다음과 같이 나타냅니다. 

 

JSON.parse(JSON.stringify());

 

위 메소드를 이용하여 상기 arr를 깊은복사를 하고 결과를 보면 다음과 같습니다. 

 

깊은복사

 

 

이렇듯 상황에 따라 어떤 형태로 참조하는지 확인할 필요가 있습니다. 깊은복사 같은 경우는 게임에서 많이 응용됩니다. 

 

연습문제입니다. 

 

다음을 깊은복사 하시오.

 

 

깊은복사란 원본값이 바뀌지 않는 경우입니다. 따라서 숫자나 문자, null, boolean 등 원시값은 바뀌지 않기때문에 얕은 복사를 해도 깊은복사의 효과를 볼 수 있습니다. 

 

정답은 다음과 같이 사용할 수 있습니다. 

 

 

깊은복사 메소드인 JSON.parse(JSON.stringify())는 처리속도가 길고 복사가 안되는 경우도 있다고 합니다. 실질적으로는 다른 메소드도 많이 사용한다고 하니 향후 정리할 기회가 있을것이라 봅니다.