[javascript] 얕은복사(ShallowCopy) vs 깊은복사(DeepCopy)복사 in Javascript

자바스크립트의 얕은 복사 깊은 복사를 설명하기 위해서 먼저 자바스크립트 Data Type 무엇이 있고 어떻게 동작하는지 아는것이 중요합니다. 이부분이 머릿속에 잘정리 돼있으면 깊은 복사 얕은 복사를 이해하는데 도움이 됩니다.

1.자바스크립트 Data Type

자바스크립트에서 자료형은 아래와 같이 크게 기본형(Primitive Value) 과 참조형(Reference Type)  2가지로 나눌수 있습니다.

각 유형의 상세 설명은 링크를 참고해주세요 (https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures)

기본형 (Primitive Value)

• Boolean
• Null
• Undefined
• Number
• String

참조형(Reference Type)

• Object

기본형과 참조형 타입은 데이터를 조작할 때 방식이 서로 다르게 됩니다. 기본형은 실제 값을 조작하게 되고 Object 들은 참조 값을 통해 제어하게됩니다. 그 차이가 값을 복사하는 과정에서 어떻게 다른지 간단한 예제를 통해 확인해보겠습니다. 

기본형 (Primitive Value) 예제

var name = '무명소졸';
var otherName = name;
 
console.log(name);             //무명소졸
console.log(otherName);        //무명소졸 
 
 
otherName = '일취월장';
 
console.log(name);             //무명소졸
console.log(otherName);        //일취월장 

otherName 값을 '일춰월장' 이라는 단어로 변경해도 name 값은 변경되지 않습니다.(자바스크립트에서 1 자이상의 글자를 Primitive Value로 다루는 부분은 객체로 다루고 있는 자바와 다른 점이기도 합니다.) 
그림으로 보면 아래와 같습니다.

참조형(Reference Type) 예제

var obj = {name:'무명소졸'};
 
var otherObj = obj;
 
console.log(otherObj.name);        //무명소졸
console.log(otherObj.name);        //무명소졸 
 
 
otherObj.name = '일취월장';
 
console.log(obj.name);              //일취월장 
console.log(otherObj.name);       //일취월장 

참조 타입일 경우 참조 값만 복사하기 때문에 같은 객체를 바라봅니다. 그래서 otherObj의 name 속성값을 변경하면 obj 값도 변경됩니다. 그림으로 보면 아래와 같습니다.

2. 얕은복사(Shallow Copy) vs 깊은복사(Deep Copy)

그럼 이제 얕은복사와 깊은복사의 차이점을 확인해보겠습니다. 기본적으로 얕은복사나 깊은복사는 새로운 객체를 생성 한다는점에서는 일치합니다. 하지만 복사를 하는 방법에서 아래와 같은 차이점이 존재합니다.

얕은복사: 원본의 기본형은 복사하고, 참조형 객체는 그 참조만 복사

깊은복사: 원본의 기본형뿐만 아니라 참조형 객체는 원본과 다른 새로운 객체를 만들어 복사

그럼 소스를 통해서 확인해보겠습니다. 자바스크립트를 이용해서 직접 구현해볼 수 있지만 Jquery 나 그 외 라이브러리나 프레임워크 등에서 이미 관련 함수들을 제공하고 있습니다. 

(깊은복사 얕으복사 자바스크립트로 구현하기 https://hyunseob.github.io/2016/02/08/copy-object-in-javascript/)

이 예제에서는 jquery 에 extend 함수를 이용해서 테스트해보겠습니다.(extend의 원래 용도 는 객체 merge)

얕은 복사(Shallow Copy) 예제

var person = {name:'무명소졸', dept:{name:'개발팀'}};
 
var shallow = $.extend(false, {}, person);//얕은복사 첫번째 인자 false 이면 얕은복사
 
 
shallow.dept.name = '기획팀';
 
console.log(person.dept.name);                //기획팀
console.log(shallow.dept.name);               //기획팀 

복사한 shallow 라는 객체의 dept 는 객체 입니다. 해당 객체의 name 값을 '기획팀'으로 변경했더니 person 객체의 dept name 까지 변경되는 것을 확인할 수 있습니다.

깊은 복사(Deep Copy) 예제

var person = {name:'foo', dept:{name:'개발팀'}};
 
var deep= $.extend(true, {}, person);//깊은복사 첫번째 인자가 true 이면 깊은복사
deep.dept.name = '기획팀';
 
console.log(person.dept.name);          //개발팀
console.log(deep.dept.name);            //기획팀

복사한 deep 라는 객체의 dept 의 name 을 변경 했지만 person 객체의 dept name 은 변경되지 않았습니다. 결국 person 의 dept 와 deep 의 dept 객체는 서로 다른객체를 바라보고 있음을 확인할 수 있습니다. 

사실 살펴보면 간단한 내용입니다.

하지만 정확히 이해하지 못하고 넘어가다보면 개발시에 원인모를 오류에 빠져 헤맬 수도 있는 부분입니다.