JS 깊은 복사와 얕은 복사: JS에서 객체 복사 방법과 차이점

요약

깊은 복사:

• 깊은 복사는 객체를 완전히 새로운 객체로 복사합니다. 즉, 객체의 속성들과 중첩된 객체까지 재귀적으로 복사됩니다.
• 복사된 객체와 원본 객체는 독립적인 개체가 되어 중첩된 객체를 수정해도 서로에게 영향을 주지 않습니다.

얕은 복사:

• 얕은 복사는 객체를 복사할 때, 객체의 속성들은 복사되지만 중첩된 객체는 참조로 복사됩니다.
• 복사된 객체와 원본 객체는 동일한 중첩된 객체를 참조하게 됩니다.
• 즉, 중첩된 객체를 수정하면 복사된 객체와 원본 객체 모두에 영향을 줍니다.

참조 복사:

• 참조 복사는 객체를 복사하는 대신, 원본 객체를 참조하는 방식입니다.
• 복사된 객체와 원본 객체는 동일한 객체를 참조하게 됩니다. 즉, 하나의 객체를 수정하면 다른 객체에도 영향을 줍니다.

---

깊은 복사 (Deep Copy)

깊은 복사는 원본 객체의 모든 속성과 중첩된 객체까지 완전히 새로운 객체로 복사하는 방법입니다. 깊은 복사를 사용하면 원본 객체와 복사된 객체는 독립적인 개체가 되어 변경 사항이 상호 간섭하지 않습니다.

깊은 복사는 원본 객체의 값을 복제하는 방식으로 수행됩니다. 이를 위한 주로 두 가지 방법을 사용합니다.

 

1. JSON.stringify()와 JSON.parse() 메서드를 사용하는 방법

JSON.stringify()는 객체를 JSON 문자열로 변환하고, JSON.parse()는 JSON 문자열을 다시 객체로 변환합니다.

// 깊은 복사 예시
const originalObject = {
  name: 'John',
  age: 25,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

const copiedObject = JSON.parse(JSON.stringify(originalObject));

copiedObject.name = 'Jane';
copiedObject.address.city = 'Busan';

console.log(originalObject);  // { name: 'John', age: 25, address: { city: 'Seoul', country: 'South Korea' } }
console.log(copiedObject);    // { name: 'Jane', age: 25, address: { city: 'Busan', country: 'South Korea' } }

위의 예시에서는 JSON.stringify()와 JSON.parse()를 사용하여 깊은 복사를 수행하고 있습니다. 이로써 원본 객체와 복사된 객체가 독립적으로 존재하며 변경 사항이 상호 간섭하지 않음을 확인할 수 있습니다.

 

 

2. 반복문이나 재귀적인함수를 사용하여 속성을 복사하는 방법

아래 예시에서는 deepCopy() 함수를 사용하여 깊은 복사를 수행하고 있습니다. 이 함수는 재귀적으로 객체의 속성들을 복사하여 완전히 새로운 객체를 생성합니다.

// 깊은 복사 예시
function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  let copy = Array.isArray(obj) ? [] : {};
  
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  
  return copy;
}

const originalObject = {
  name: 'John',
  age: 25,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

const copiedObject = deepCopy(originalObject);

copiedObject.name = 'Jane';
copiedObject.address.city = 'Busan';

console.log(originalObject);  // { name: 'John', age: 25, address: { city: 'Seoul', country: 'South Korea' } }
console.log(copiedObject);    // { name: 'Jane', age: 25, address: { city: 'Busan', country: 'South Korea' } }

---

얕은 복사 (Shallow Copy)

얕은 복사는 원본 객체의 속성들을 복사하지만 중첩된 객체는 참조로 복사하는 방법입니다. 따라서, 원본 객체와 복사된 객체는 동일한 중첩된 객체를 참조하게 됩니다. 이로 인해 중첩된 객체를 수정하면 원본 객체와 복사된 객체 모두에 영향을 미칩니다.

얕은 복사는 JavaScript의 Object.assign() 메서드를 사용하여 수행할 수 있습니다.

// 얕은 복사 예시
const originalObject = {
  name: 'Kim',
  age: 25,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

const copiedObject = Object.assign({}, originalObject);

copiedObject.name = 'Choo';
copiedObject.address.city = 'Busan';

console.log(originalObject);  // { name: 'Kim', age: 25, address: { city: 'Busan', country: 'South Korea' } }
console.log(copiedObject);    // { name: 'Choo', age: 25, address: { city: 'Busan', country: 'South Korea' } }

위의 예시에서는 Object.assign()을 사용하여 얕은 복사를 수행하고 있습니다. 이로써 원본 객체와 복사된 객체가 동일한 중첩된 객체를 참조함을 확인할 수 있습니다. 따라서 중첩된 객체를 수정하면 원본 객체와 복사된 객체 모두에 영향을 미치게 됩니다.

 

💁‍♂️originalObject.address.city 값이 'Busan'인 이유? 

Object.assign()은 얕은 복사를 수행합니다.
얕은 복사는 객체를 복사할 때, 객체의 속성들은 복사되지만, 중첩된 객체는 참조로 복사됩니다.
즉, 중첩된 객체는 복사된 객체와 동일한 객체를 참조하게 되기때문에, 하나의 객체를 수정하면 다른 객체에도 영향을 줍니다.