객체의 깊은 복사 vs 얕은 복사

오늘 이 글을 쓰는 이유는,

function applyCoupon(cart, coupon) {
  cart.items.forEach((item) => {
    item.price -= coupon.discount;
  });
}

const userACart = {
  items: [
    { name: "키보드", price: 30000 },
    { name: "마우스", price: 20000 },
  ],
};

const userBCart = userACart;
const coupon = { discount: 5000 };

applyCoupon(userBCart, coupon);



userACart와 userBCart가 독립적으로 동작하기 위해 코드를 어떻게 수정해야 하는가.

그 이유는 무엇인가에 대한 질문에 자신있게 대답하지 못했기 때문이다.

 

일단 userACart와 userBCart가 독립적으로 동작하지 않는 이유부터 보자면,

userBCart에 userACart를 할당했기 때문이다.

즉, userACart가 참조하는 값을 userBCart가 그대로 참조하여 참조값이 변하면서 두 변수 모두 영향을 받았기 때문이다.

 

따라서 해당 코드를 수정하기 위해서 userBCart에 userACart를 깊은 복사하여 할당해야 한다.

 

그런데 여기서 왜 깊은 복사를 해야하느냐라는 질문을 받았을 때, 순간 머릿속이 하얘졌다.

얕은 복사는 { ...userACart } 이렇게 스프레드로 풀어서 쓰면 돼 !

깊은 복사는 재귀 함수를 사용하면 돼 !

 

생각해보니 내가 아는 건 여기까지였다.

얕은 복사는 언제 사용해도 되고, 깊은 복사는 언제 사용해도 되는지에 대해 잘 인지하지 못 했다.

 

그래서 이 글을 쓰면서 정리해보려고 한다.

 

1. 얕은 복사

• 얕은 복사는 최상위 객체의 속성 값들만 복사한다.
• 객체 속성 중 배열이나 객체 같은 참조형 데이터는 복사되지 않고 원래의 참조를 유지한다.

위의 코드에서 얕은 복사를 하면 안 되는 이유는 (여기서 메모리 주소는 이해를 쉽게하기 위해 임의로 정한 값)

1. userACart는 @7001 메모리 주소를 참조한다.

2. userACart를 얕은 복사하여 userBCart에 할당한다면, userBCart는 @7002 메모리 주소를 참조한다.

3. userACart (@7001) 내부의 items는 배열 즉 참조형 데이터로 @8001 메모리 주소를 참조한다.

4. 얕은 복사를 했기 때문에 userBCart (@7002) 내부의 items는 그대로 @8001 메모리 주소를 참조한다.

 

따라서 서로 다른 주소를 참조하더라도, 내부 참조형 데이터 (items)가 여전히  @8001 메모리 주소를 참조하기 때문에 두 객체가 영향을 받는다.

 

그럼 얕은 복사는 언제 하면 좋을까?

객체의 최상위 속성 값을 단순히 읽기만 한다거나 최상위 객체에 새로운 속성을 추가하는 경우이다.

// 위의 예시를 그대로 이어받아 userBCart에만 새로운 property를 추가한다.
userBCart.userName = "Dana"; 

console.log(userACart);
// {items: [ { name: '키보드', price: 25000 }, { name: '마우스', price: 15000 } ]}

console.log(userBCart);
// {items: [ { name: '키보드', price: 25000 }, { name: '마우스', price: 15000 } ],userName : 'Dana'}

userBCart에만 { userName : 'Dana' }가 추가되었다.

해당 프로퍼티는 @7002메모리 내부에만 들어있기 때문이다.

 

2. 깊은 복사

• 깊은 복사는 객체 내 모든 계층에 존재하는 참조형 데이터를 재귀적으로 복사하여 완전히 새로운 메모리 주소를 할당한다.
• 즉 서로 다른 메모리 주소를 참조하므로 독립적으로 동작이 가능하다.

나는 위의 문제에서 두 변수가 독립적으로 동작하기 위해 userBCart를 다음과 같이 수정했다.

 const userBCart = {
    items : userACart.items.map((item) => {
    	return {...item}
    })
  };

 

items까지 직접 들어가고 map이 새로운 배열을 뱉어내는 점을 이용하여

items 내부의  { name : ... , price : ..} 객체를 스프레드를 통해 얕은 복사하였다.

여기서 객체들을 얕은 복사를 할 수 있었던 이유는

객체 내부의 값들이 모두 값을 참조하지 않고 직접 저장하는 원시 타입의 데이터이기 때문이다.

 

이 문제에서는 해당 코드로도 해결이 되었지만

만약 객체 내부에 또 다른 중첩 객체가 있다면 두 변수는 위 코드로는 독립적으로 동작할 수 없다는 점은 참고해 두자.