[Javascript-Core] 자바스크립트의 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해서 알아보자.

오늘 알아볼 것은 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)이다.

 

우선 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)를 이해하기 위해서는 원시 타입(Primitive Type), 참조 타입(Reference Type)에 대해서 알아야 한다.

 

사실상 자바스크립트를 학습하며 깊은 복사와 얕은 복사를 학습하기 위해 내 블로그를 검색을 통해 들어올 사람들이라면 원시 타입과 참조 타입에 대해서 모를 사람은 없다고 생각하고 그에 대한 깊은 내용은 생략하겠다.

 

하지만 여러 자바스크립트 개념을 학습하고 있는 상황이라면 머릿속이 아주 혼란스러울 수 있으므로 가볍게 한 번 짚고 넘어가 보자.

---

Primitive Type

원시 타입은

• Number
• String
• Boolean
• Null
• undefined

그리고 추가적으로 ES6에서 추가된 Symbol() 타입이 존재한다.

 

이런 원시 타입의 특징은 Immutable이라는 것인데 자세한 내용은 PoiemWeb-Immutable에서 확인하는 게 빠를 것 같아서 생략했고, 우리가 값을 복사한다면 Pass By Value 형태로 단지 값만 복사된다.

 

코드와 콘솔 결과

이러한 코드가 있을 때 우리가 임의적으로 car = 2라고 값을 변경한다면 각자 서로 다른 값을 유지할 수 있게 된다.

 

 

Reference Type

자바스크립트에서 참조 타입 같은 경우는

• 객체
• 배열
• 함수

등이 대표적인 참조 타입으로 불려진다.

 

이런 참조 타입은 값이 복사가 되는 게 아니라 해당 객체가 참조하는 주소가 복사돼서 다른 참조 변수(car, bike)라고 하더라도 서로 같은 곳을 가리키며 결국 둘 중 하나의 참조 변수를 통해서 값을 변경하게 되면 서로 같은 주소를 공유하므로 변경되는 값은 같아지게 된다.

 

---

이제 기본적으로 알아야 할 부분에 대해서는 알았으니 본론인 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해서 알아보자.

그전에

이게 왜 필요한데?

에 대한 답을 간단하게 제시를 해주자면

우리가 얕은 복사와 깊은 복사에 대해서 알게 되면, 복사 시점에 해당 프로퍼티의 속성과 모두 동일한 객체를 그대로 복사하지만, 서로 다른(공유하지 않는) 값을 갖게 할 수 있는 게 바로 우리의 목표이다.

먼저 결론을 알려줄게

얕은 복사 : 바로 아랫단계의 값만 복사
깊은 복사 : 내부에 존재하는 모든 값 복사.

 

이런 특징을 갖는다는 걸 먼저 캐치하고 아래의 설명을 보면 이해가 좀 더 빠르게 될 수 있다.

얕은 복사 (Shallow Copy)

우리는 서로 공유되는 값을 거부하고 각각의 값을 독립적으로 갖게 하고 싶은 것이다.

 

그럼 독립적은 값을 갖게 하고 싶으면 각각의 키와 값을 새로운 객체의 원소로 전해줄 수 있으면 되지 않을까?라는 생각에서부터 출발한다.

복사 하기

그럼 키와 값을 각각으로 이터레이션을 돌리면 되지 않을까?

 

이터레이션은 각각의 원소를 하나하나 확인하는 방법을 말한다.

 

자바스크립트에 Iterator 역할을 하는 방법은 크게 2가지가 있는데 map()이나 forEach를 사용하는 것이다.

 

만약 우리에게

let car = {
    wheel: 4,
    engine: 2,
    color: {
        sheet: 'brown',
        handle: 'black',
        outlook: 'white',
    }
}

라는 객체가 있을 때, 우선 하나 하나 key를 뽑아야 한다.

그리고 그 key에 해당하는 값을 Object.key()로 뽑아올 수 있는데 그 반환을 배열로 한다.

그럼 그 배열을 새로운 객체에 전해주면 복사가 완료된다.

짜잔.

 

하지만 문제가 생긴다.

 

만약 객체의 프로퍼티가 객체라면??

복사까지는 잘 되는데, 어차피 내부에 있는 color 객체가 map에 의해 하나 하나 대입되는 거라면 분명 color은 서로 참조하고 있을게 뻔하니 이렇게는 우리가 원하는 목표에 달성하기 어려워 보인다.

그럼 이제 여기서 깊은 복사의 개념이 등장한다.

깊은 복사 (Deep Copy)

위에서 우리가 깊은 복사를 해야 한다고 하는데 그럼 어떻게 할까?

재귀 하기

그럼 우리가 얕은 복사에서 봤던 코드에서 하나씩 원소를 iteration 할 때, 객체를 만나면 복사하는 함수를 재귀적으로 호출하면 되지 않을까?

 

정답이다.

 

그렇지만 그러기엔 예외 사항도 많고 매번 쓸 때마다 불러올 수 있게 함수를 작성하거나 라이브러리처럼 만들어야 하는데, 우린 그 시간에 다른 개념에 대해서 알아보는 게 훨씬 경제적이다.

그럼 방법이 있을까?

JSON 이용하기

그 방법은 바로 JSON을 이용하면 된다.

 

우리가 객체를 JSON으로 만들고 해당 JSON을 값으로써 새로운 원소에 넣어주게 된다면 끝이다.

 

사용 방법은

복사 대상 객체 = JSON.parse(JSON.stringify( 복사 희망 객체 ));

사실 이 방법은 우리가 지금껏 했던 것들을 무색하게 할 만큼 간단하지만 그래도 간단함에 한 시름 놓게 되었다.

 

이제 테스트를 해보자.

짜잔.

 

서로 다른 객체이며 값을 공유하지도 않게 되었다.

 

---

오늘은 자바스크립트에 얕은 복사와 깊은 복사에 대한 개념을 알아보았는데, 지금이야 단계가 한 단계로 객체 내의 객체 하나지만 우리가 리액트나 리덕스를 하게 된다면 많게는 5개에서 10개의 단계를 거쳐야 하는 경우도 있다.
그래서 이 개념이 상당히 중요한 개념으로 소개가 되곤 하는데 혹시라도 리액트를 배우거나 리덕스를 배울 때 나의 글을 보게 되었다면 조금이나마 도움이 되었으면 좋겠다.