얕은 복사와 깊은 복사

TLDR;

얕은 복사는 참조값을 복사하는 것이며, 깊은 복사는 내부의 값을 복사하여 새로운 객체를 만드는 것을 의미한다. 얕은 복사는 참조값 복사이기에 복사본 변경 시 원본이 변경되지만, 깊은 복사는 아예 새로운 객체이기 때문에 복사본 변경에도 원본은 훼손되지 않는다.

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 의미한다. 얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다.

얕은 복사를 위해서는 Spread Operator 또는 Object.assign을 사용할 수 있으며, 깊은 복사를 하려면 재귀함수를 이용하거나 JSON 변환을 사용하면 된다.

불변값인 기본형 vs 가변값인 참조형

기본형은 불변값이다.

기본형 타입의 경우 기존에 선언해 놓은 변수에 새로운 값을 할당하려면 데이터에 새로운 영역을 마련해서, 해당 공간에 새로운 데이터를 저장하고, 해당 데이터의 주소값을 다시 기존의 변수에 할당하는 식으로 이루어지는 불변값이다.

아래 코드에서 a는 처음에는 'abc'를 담고 있는 데이터 영역의 주솟값 @2001을 가지고 있다가, 'abcdef'를 다시 할당하면 'abcdef'를 담게 될 공간을 만들어 해당 공간의 주솟값인 @2002를 a에 새로 할당한다.

// 기본형 타입(primitive type)의 불변성
var a = 'abc';
a = a +'def';    // abc와 abcdef는 전혀 다른 데이터 영역에 저장된다. (새로 만들어진다.)

var b = 5; 
var c = 5;
b = 7;          // b를 7로 바꾸면, 기존에 7이 들어있는 데이터 영역 있는지 먼저 검사, 
                // 없으면 새로 만들어서 b에 저장함

[ 이름 : a / 값 : @2001('abc') ] => [ 이름 : a / 값 : @2002('abcdef') ] // 주솟값이 아예 달라진다.
[ 이름 : b / 값 : @3001(5) ] => [ 이름 : b / 값 : @3003(7) ]

반면, 참조형 타입은 가변값이다.

어떤 객체의 프로퍼티 값을 변경한다고 해보자. 아래 예시 코드에서 obj1이라는 객체는 a와, b를 담고있는 데이터의 주솟값 묶음을 가지고 있게 된다. 다시 말해, obj1은 a,b가 저장되어 있는 데이터의 주소값 @7103, @7104를 가지고 있는 데이터의 주소값 @5001을 가지고 있게 된다.

만약 프로퍼티 a를 변경할 경우, a가 저장되어 있는 데이터의 주솟값인 @7103에 찾아가 해당 데이터가 가지고 있는 값의 주소값을 변경해주는 방식으로 값을 변경한다. 이 때, obj1이 가지고 있는 데이터의 주솟값, 즉 @5001에 담겨 있는 주소값은 그대로 @7103, @7104이며 단지 @7103에 저장되어 있는 값을 변경(@5003 -> @5004)해 줄 뿐이다.

주목할 점은 프로퍼티 변경 전과 후에 obj 1이 가리키고 있는 데이터의 주소값 @5001은 변하지 않는다는 것이다. (cf. 기본형의 경우 값을 변경하면 가지고 있는 데이터의 주솟값 자체가 변한다.)

// 참조형 타입(reference type)의 가변성 - 프로퍼티 재할당

var obj1 = {
    a: 1,
    b: 'bbb'
};

obj1.a = 2; // obj1이 가리키고 있는 주소값을 담고 있는 @5001(데이터 @7103~@7104)은 변하지 않는다.  
            // @7103안에 있는 값이 @5004로 바뀔 뿐이다.

변경 전
[ 이름 : obj1 / 값 : @5001(@7103(@5003(1)) ~ @7104(@5002(bbb)) ]

변경 후
[ 이름 : obj1 / 값 : @5001(@7103(@5004(2)) ~ @7104(@5002(bbb)) ]

*변경 전과 후에 obj1은 동일하게 @5001(@7103~ @7104)을 값으로 가지고 있다.

가변성이 복사에 미치는 영향

앞서 설명한 것과 같은 이유로, 복사를 하게 되면 기본형 타입은 값이 담긴 주솟값을 바로 복제하는 반면, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다. 다시, 주목해야 할 점은 참조형은 주솟값을 복제한다라는 것이다.

참조형은 주소값을 복제한다는 특성 때문에 참조형에서 복사는 다음와 같이 두 가지로 나뉘어진다.

분류	정의	설명
얕은 복사(shallow copy)	바로 아래 단계의 값만 복사	중첩객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사. 즉, 사본 바꾸면 원본의 데이터도 바뀜
깊은 복사(deep copy)	내부의 모든 값들을 하나하나 전부 찾아서 복사	모두 복사하므로 원본의 불변성 유지가능

얕은 복사란?

참조값을 복사하는 것을 의미한다. 복사본을 변경하면 원본이 변경된다.

var obj1 = { c: 10, d: 'ddd'};
var obj2 = obj1;                   // obj2에 obj1의 주솟값을 복사

obj2 = { c: 20, d: 'ddd'};         // 주솟값을 복사했기 때문에 복사한 객체의 프로퍼티를 변경하면 원본도 변경된다.

얕은 복사의 방법으로 Spread Operator 혹은 Object.assign을 이용한다. 

그런데 인터넷에 찾다보면 Spread Operator는 1depth까지 깊은 복사다 라는 글을 많이 찾을 수 있어서 처음에는 헷갈렸다. 나의 경우 [ ], { } 배열 리터럴, 객체리터럴이 스프레드 연산자의 한 부분이라고 엮어서 생각하여 스프레드 연산자를 이용해 얕은 복사를 한다는 말이 잘 이해가 가지 않았다. 

정리해 보자면, { ...obj }와 같이 어떤 객체를 스프레드 연산자로 복사할 때,  { } 중괄호 부분은 객체 리터럴로 새로운 주소값을 만들어 내며, 스프레드 연산자로 값을 복사해 온다. 이 때, 원본의 값이 원시형(primitive type)인지, 참조형(reference type)인지에 따라 값을 복사하느냐, 주소값을 복사하느냐가 나뉜다. 참조형의 경우 참조형 안의 프로퍼티까지 전부 복사하지 않고 주소값만 복사가 되었으므로, 복사한 객체의 참조형 데이터를 변경하면 원본도 변경이 된다. 

따라서 얕은 복사이며, 참조형 데이터까지 참조를 끊어주도록 완전히 복사를 하는 것을 깊은 복사라고 하는 것이다.

얕은 복사 1. Spread Operator

const obj = {name: 'Minju', favorites:{food:'cake', music: 'acoustic'}};
const copyObj = {...obj}  // { }객체리터럴로 새로운 객체 만든 후, name은 값 복사, favorites는 주소값 복사

copyObj.name = 'Ariel';   // primitive type이기 때문에 원본 바뀌지 않음.
copyObj.favorites.food = 'bread'   // obj.favorites와 copyObj.favorites는 같은 주소값을 가지고 있었는데, 그 중 copyObj의 food에 들어있는 값을 변경했으니, obj도 덩달아 변경됨

얕은 복사 2. Object.assign()

Spread Operator 대신에 Object.assign()을 이용해도 된다.

const obj = {a : 1, b: 2}

const copyObj = Object.assign({}, obj) // 최상단은 새로운 객체를 만들어 주소값이 완전 달라졌지만, 내부의 값은 그대로 복사해 옴

 

깊은 복사란?

내부의 모든 값들을 하나하나 전부 찾아서 복사하여 아예 새로운 객체를 만드는 것을 의미한다.

값은 같지만 원시형, 참조형에 상관없이 주솟값이 완전히 다른, 전혀 다른 객체를 하나 만드는 것이다. 얕은 복사와 다르게 복사본 변경시 원본은 유지된다.

 

값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우 사용한다. 깊은 복사를 하려면 재귀함수를 사용하거나, JSON 변환을 하면 된다.

깊은 복사 방법 1. 재귀함수 사용

var copyObjectDeep = function(target){
    var result = {};
    if(typeof target === 'object' && target !== null){    // typeof 명령어가 null에 대해서도 'object'를 반환하기 때문에 조건에 추가함
        for (var prop in target){
            result[prop] = copyObjectDeep(target[prop]); // 객체인 경우 재귀적으로 호출
        }
    }else{
        result = target;
    }
    return result;
}

 

깊은 복사 방법 2. JSON 변환 사용

객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 바꾸면 깊은 복사를 할 수 있다.
httpRequest로 받은 데이터를 저장한 객체를 복사할 때 등 순수한 정보만 다룰 때 활용하기 좋은 방법이다!

var copyObjectViaJSON = function(target) {
    return JSON.parse(JSON.stringify(target));
};