14. 참조 vs 복사 🎭

목표

깊은 복사와 얕은 복사를 비교하여 알아보자.

원시 타입

문자열, 수, 불리언 자료형은 원시 타입이라고 하여 값을 바로 저장한다. 복사할 때도 값을 복사하여 새로운 변수에 할당하는 것이기 때문에 서로 다른 변수가 된다.

예를 들어 문자열 하나를 생성하고 이를 복사하여 다른 변수에 저장했다. 그다음 한쪽을 변화시키면 어떻게 될까?

둘은 서로 다른 변수이기 때문에 한쪽을 변화시키더라도 다른 쪽이 영향을 받지 않는다.

참조 타입

문제가 되는 것은 참조 타입이다. 배열, 객체 등은 메모리 크기가 정해져 있지 않고 실행 단계에서 동적으로 크기가 변할 수 있다. 이런 자료형은 힙 영역에 실제 값을 저장하고 스택 영역에는 힙 영역에 저장된 주소를 보관한다. 그렇기 때문에 복사할 때 값이 복사되지 않고 주소만 복사되는데, 이를 얕은 복사라고 한다.

배열

4개의 문자열을 담은 배열을 생성하고 이를 복사하였다. 이 둘은 참조를 복사한 것이라서 실제로는 같은 값을 가리키고 있다.

한 배열을 변화시킨 다음 비교해 보면 이를 확실히 알 수 있다.

분명 roster에만 Aiden을 추가하였는데 players에도 Aiden이 추가되어 있다. roster가 참조하는 값을 변화시킨 것이기 때문에 그 값을 동일하게 가리키는 players도 변하게 된 것이다.

이렇게 참조 타입의 경우 얕은 복사를 하게 되면 원하지 않는 값의 변경이나 보안상의 문제가 생길 수 있다. 얕은 복사와는 반대로 실제 값을 복사하는 것을 깊은 복사라고 한다.

위의 네 가지 방식으로 깊은 복사를 실행할 수 있다. 먼저 slice는 배열의 값을 복사해 새 배열로 만들어 반환하기 때문에 깊은 복사가 이루어진다. 두 번째 방법은 빈 배열을 만들고 복사할 배열의 값을 덧붙이는 것으로, 값을 처리하기 때문에 깊은 복사가 된다. 세번째는 ES6에서 추가된 스프레드 연산자를 이용한 방법으로 가장 간단하게 깊은 복사를 수행할 수 있다. 마지막은 from 메소드를 이용하여 기존 값으로 새 배열을 만드는 것이다.

어떤 방식이든 동일하게 깊은 복사가 이루어져 한쪽을 변화시키더라도 다른쪽에는 영향을 미치지 않게 된다.

객체

객체의 경우도 배열과 비슷하다. name과 age 속성을 가지는 객체를 만들어 복사하였다. 객체도 대입 연산자로 복사하면 얕은 복사가 이루어진다.

복사한 객체의 값을 수정했지만 원래 객체의 값까지 바뀌어버렸다.

Array.from과 비슷하게 Object.assign을 사용하여 빈 객체에 값을 복사해 넣는 것으로 해결할 수 있다.

이때 새로운 값을 추가하든, 이전 값을 수정하든 원래 객체에는 전혀 영향을 미치지 않는다.

ES6 문법에서는 배열과 같이 스프레드 연산자를 사용해도 된다.

깊이

다만 위의 방식들 모두 문제를 완벽하게 해결하지는 못한다.

name, age, social의 속성을 가지는 객체를 만들어서 스프레드 연산자로 복사하였다.

앞선 예시와 같이 깊은 복사가 수행되기 때문에 복사한 객체의 값을 바꿔도 원본에는 영향을 주지 않는 것처럼 보인다.

그런데 social 객체의 값을 바꾼다면 예상과 다른 일이 일어난다.

분명히 복사본의 값만 바꾸었는데 원본의 값도 바뀌어 있는 것을 볼 수 있다. 이런 일이 일어난 이유는 객체 안에 객체가 있었기 때문이다. 객체를 깊은 복사할 때 객체 안에 있는 값을 하나씩 복사해온다. 그런데 이 값이 참조 타입이라면 얕은 복사를 하게 된다. 즉 중첩된(nested) 구조에서 깊은 복사가 제대로 이뤄지지 않을 수 있다는 뜻이다.

이를 간단히 해결하기 위해 JSON의 메소드를 활용할 수 있다.

보다시피 복사한 객체에서 객체를 값으로 갖는 속성을 수정하였지만 원본의 값에는 영향이 없다. 그러나 이 방식이 성능 면에서는 좋지 않을 수도 있다. 역시 가장 편리한 건 Lodash 라이브러리에서 지원하는 cloneDeep을 사용하는 것이다. 다만 이전 강의와 마찬가지로 깊은 복사와 얕은 복사의 개념을 알지 못하면 오류가 생길 위험이 매우 크기 때문에 개념을 확실히 아는 것이 중요하다.

새로 알게 된 점

깊은 복사와 얕은 복사는 다른 언어에도 흔히 있는 개념이지만 JS에서 이를 해결하는 방법을 찾아보는 데 의의가 있었다. 내가 JS를 공부하기 시작한 것이 최근이라서 ES6 문법을 주로 배워 스프레드 연산자를 사용하는 방법만 알고 있었는데, 스프레드 연산자를 사용하지 않고도 깊은 복사를 수행할 수 있는 방법을 여러 가지 익힐 수 있었다.

Lodash 라이브러리는 구글링을 하면서 얼핏 본 기억만 있고 실제로 써본 적은 없는데, 이론적인 부분을 공부하면 할수록 Lodash가 해법으로 제시되는 걸 보아 유용한 기능이 많은 것 같다.

그리고 MDN은 신이다.

소스 코드

Visit Github Repository