js Shallow Copy(얕은 복사)와 Deep Copy(깊은 복사)의 차이

ES6 js copy

개요

코드를 구성하다 보면 객체를 복사해야 하는 경우가 왕왕 생깁니다. 하지만, 오늘 소개해드릴 복사 방법 두 가지의 차이를 명확히 구분하지 않는다면 예상치 못한 에러를 맞닥뜨릴 수 있습니다. js에는 Shallow Copy(얕은 복사)와 Deep Copy(깊은 복사)가 있는데 하단 본문에서 자세히 살펴보도록 할게요😃

 

Shallow Copy (얕은 복사)📙

얕은 복사는 객체의 최상위 속성만 복사합니다. 복사된 객체의 중첩 객체나 배열은 원본 객체의 참조를 그대로 유지하므로, 중첩된 객체나 배열을 수정하면 원본 객체에도 영향을 끼치게 됩니다.

 

// 원본 객체
let original = {
    name: 'Binco',
    age: 15,
    address: {
        city: 'Daejeon',
        zip: '1234'
    }
};

// Shallow copy(얕은 복사)
let shallowCopy = Object.assign({}, original);

// 원본 객체와 shallow copy 객체의 차이 확인
console.log(shallowCopy.address === original.address); // true (같은 참조)

shallowCopy.name = 'JS';  // 최상위 속성 수정 - 원본 객체 영향 없음
shallowCopy.address.city = 'Seoul'; // 중첩 객체 속성 수정 - 원본 객체에 영향 있음

console.log(original.name);  // 'Binco'
console.log(original.address.city);  // 'Seoul'

 

Object.assign()을 활용하여 얕은 복사를 하면, name과 age 같은 원시값 속성은 복사되지만, address와 같은 중첩 객체는 원본 객체와 참조를 공유하게 됩니다. 그렇기 때문에, 복사한 shallowCopy의 address.city 값을 변경하면 원본 값인 original의 address.city도 같이 변경되게 됩니다.

 

💡 Shallow Copy(얕은 복사)하는 여러 방법

1. 스프레드 연산자 사용 (...)

// 객체 얕은 복사
const original = { name: 'Binco', address: { city: 'Daejeon' } };
const shallowCopy = { ...original };

console.log(shallowCopy.address === original.address); // true (같은 참조)

 

2. Array.prototype.slice() 사용

const array = [1, 2, { a: 3 }];
const shallowCopyArray = array.slice();

console.log(shallowCopyArray[2] === array[2]); // true (같은 참조)

 

Deep Copy (깊은 복사)📘

깊은 복사는 객체의 모든 속성, 중첩 객체까지 모두 복사합니다. 복사된 객체는 원본 객체와 완전히 독립적인 관계로, 복사된 객체를 수정해도 원본 객체에 영향을 주지 않습니다.

 

// 원본 객체
let original = {
    name: 'Binco',
    age: 15,
    address: {
        city: 'Daejeon',
        zip: '1234'
    }
};

// Deep copy 
let deepCopy = JSON.parse(JSON.stringify(original));

// 원본 객체와 deep copy 객체의 차이 확인
console.log(deepCopy.address === original.address); // false (다른 참조)

deepCopy.name = 'JS'; // 최상위 속성 수정 - 원본 객체 영향 없음
deepCopy.address.city = 'Seoul'; // 중첩 객체 속성 수정 - 원본 객체에 영향 없음

console.log(original.name);  // 'Binco'
console.log(original.address.city);  // 'Daejeon'

 

JSON.stringify()와 JSON.parse()를 사용하면 객체를 문자열로 변환한 후 다시 객체로 변환하는 과정에서 모든 중첩된 객체까지 복사를 진행합니다. 이렇게 복사된 객체는 원본 객체와 독립적으로 존재하게 됩니다.

 

💡 Deep Copy(깊은 복사)하는 여러 방법

1. Lodash 라이브러리의 cloneDeep() 사용

const _ = require('lodash');  // lodash 라이브러리 설치 필요
const original = { name: 'Binco', address: { city: 'Daejeon' } };
const deepCopy = _.cloneDeep(original);

console.log(deepCopy.address === original.address); // false (다른 참조)

 

마치며

지금까지 js에서의 얕은 복사와 깊은 복사의 차이점을 알아봤습니다. 개인적인 생각으로는 코드를 구성할 때 안전하게 사용하려면 Deep Copy를 사용해서 독립적인 객체를 만들고 사용하는 것이 좋을 것 같아요😊

---

👨‍👩‍👦‍👦 오픈채팅방 운영

취업을 준비하는 예비 개발자분들을 위한 질문&답변할 수 있는 공간을 만들었습니다. 취업과 이직을 하기 위해서 어떤 걸 중점적으로 준비해야 하는지부터 포트폴리오&이력서 작성법 등 다양한 질문들을 받고 답변을 드립니다. 참여하셔서 다양한 정보 얻고 가시면 좋을 것 같네요😁

 

참여코드 : 456456

https://open.kakao.com/o/gVHZP8dg