참조 복사, 얕은 복사와 깊은 복사 알아보기

모던 자바 스크립트 Deep Dive 책으로 자바스크립트를 처음 공부하고 있는 중
얕은 복사와 깊은 복사 개념이 나왔다.

 

얕은 복사는 객체의 참조 값을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다는데
이게 와닿지 않아서 추가로 찾아봤다

 

자바를 얕게 공부할 때도 들어본 적 없는 개념이어서
처음 봤을 때 바로바로 이해되지 않아서
추가로 공부 후 내용을 정리해서 남긴다.

참조 복사

참조 복사는 객체의 참조값(주소값)을 복사한다.
이 경우 두 변수는 동일한 객체를 가리키게 되며, 한 변수를 통해 객체를 변경하면
다른 변수에도 그 변경 사항이 반영된다.

얕은 복사

얕은 복사는 객체의 최상위 수준 속성만 복사하고, 하위 객체들은 동일한 참조를 유지한다.
즉, 얕은 복사로 복사한 객체에 하위 객체가 있다면 이 하위 객체는 참조 값만 복사된다.

깊은 복사

깊은 복사는 객체의 모든 수준의 속성을 재귀적으로 복사하여 완전히 새로운 객체를 만든다.
따라서 깊은 복사는 하위 객체까지 새로 만들어서 복사한다.

 

 

객체 originalObject

    let originalObject = {
      primitiveProp : 2,
      nestedObject : {
            nestedProp1 : 3,
            nestedProp2 : 4
      }
    };

 

 

참조 복사

let referenceCopy = originalObject;

// 참조 복사된 객체의 속성 변경
referenceCopy.primitiveProp = 5;
referenceCopy.nestedObject.nestedProp1 = 6;

console.log(originalObject.primitiveProp); // 출력: 5
console.log(originalObject.nestedObject.nestedProp1); // 출력: 6

• 'referenceCopy'를 통해 변경한 값들이 'originalObject'에 반영됩니다. 모든 속성이 함께 변경됩니다.

 

얕은 복사

let shallowCopy = { ...originalObject };

// 얕은 복사된 객체의 최상위 속성 변경
shallowCopy.primitiveProp = 7;

// 얕은 복사된 객체의 하위 객체 속성 변경
shallowCopy.nestedObject.nestedProp1 = 8;

console.log(originalObject.primitiveProp); // 출력: 5 (바뀌지 않음)
console.log(originalObject.nestedObject.nestedProp1); // 출력: 8 (바뀜)

• 'shallowCopy'를 통해 최상위 속성 ('primitiveProp')을 변경해도 'originalObject'의 'primitiveProp' 값은 바뀌지 않습니다.
• 'shallowCopy'의 하위 객체 속성 ('nestedObject.nestedProp1')을 변경하면 'originalObject'의 하위 객체 속성도 함께 변경됩니다.

 

깊은 복사

let deepCopy = JSON.parse(JSON.stringify(originalObject));

// 깊은 복사된 객체의 최상위 속성 변경
deepCopy.primitiveProp = 9;

// 깊은 복사된 객체의 하위 객체 속성 변경
deepCopy.nestedObject.nestedProp1 = 10;

console.log(originalObject.primitiveProp); // 출력: 5 (바뀌지 않음)
console.log(originalObject.nestedObject.nestedProp1); // 출력: 8 (바뀌지 않음)

• 'deepCopy'를 통해 변경한 값들이 'originalObject'에 반영되지 않습니다.
• 최상위 속성과 하위 객체 속성 모두 독립적으로 변경됩니다.

 

요약

• 참조 복사 : 객체의 참조값(주소값)만 복사하여 두 변수가 동일 객체를 가리키게 함. 모든 속성이 함께 변경
• 얕은 복사 : 객체의 최상위 수준 속성만 복사하고 하위 객체들은 참조 값만 복사함. 최상위 속성은 독립적이지만 하위 객체 속성은 함께 변경됨
• 깊은 복사 : 객체의 모든 수준의 속성을 제귀적으로 복사하여 완전히 새로운 객체를 만듦. 최상위 속성과 하위 객체 속성 모두 독립적으로 변경