자바스크립트 프로퍼티 얕은 복사와 깊은 복사

09 Sep 2023

javascript

자바스크립트에서 객체 복사는 매우 중요한 작업입니다. 특히, 객체를 복사하고 수정하기 전에 이전 상태로 다시 복원해야 하는 경우입니다. 여기에서 얕은 복사와 깊은 복사가 등장합니다.

얕은 복사 (Shallow Copy)

얕은 복사는 원본 객체의 참조를 참조하는 새로운 객체를 생성하는 방식입니다. 이는 원본 객체의 프로퍼티가 복사되는 것이 아니라 같은 메모리 주소를 참조하게 됩니다. 따라서, 얕은 복사된 객체를 수정하면 원본 객체 역시 변경되는 문제가 발생할 수 있습니다.

다음은 얕은 복사를 수행하는 방법입니다.

let originalObject = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  }
};

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

// 복사된 객체 수정
shallowCopy.name = "Tom";
shallowCopy.address.city = "Los Angeles";

console.log(originalObject);
console.log(shallowCopy);

위의 코드에서, Object.assign()을 사용하여 얕은 복사를 수행했습니다. 그러나 주의해야 할 점은 Object.assign()은 프로퍼티의 값이 객체인 경우에는 참조를 복사하므로, 객체의 내부 프로퍼티를 수정하면 원본 객체도 수정됩니다.

깊은 복사 (Deep Copy)

깊은 복사는 원본 객체와는 별개의 메모리 공간에 동일한 값을 가지는 새로운 객체를 생성합니다. 이를 위해 중첩된 객체의 프로퍼티까지 모두 새로운 객체로 복사해야 합니다. 따라서, 깊은 복사는 원본 객체의 수정과는 독립적으로 동작합니다.

다음은 깊은 복사를 수행하는 방법 중 하나인 JSON.parse()와 JSON.stringify()를 사용한 예시입니다.

let originalObject = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  }
};

// 깊은 복사
let deepCopy = JSON.parse(JSON.stringify(originalObject));

// 복사된 객체 수정
deepCopy.name = "Tom";
deepCopy.address.city = "Los Angeles";

console.log(originalObject);
console.log(deepCopy);

위의 코드에서 우리는 JSON.stringify()와 JSON.parse()를 사용하여 객체를 JSON 문자열로 변환하고 다시 객체로 변환합니다. 이 과정은 중첩된 객체까지 모두 새로운 객체로 복사해주기 때문에 깊은 복사가 이루어집니다.

얕은 복사와 깊은 복사의 선택

얕은 복사와 깊은 복사는 각각의 상황에 따라 선택되어야 합니다.

얕은 복사는 객체의 단순한 복사가 필요한 경우 유용합니다. 중첩된 객체가 없는 경우에는 참조 문제가 없을 수 있습니다.
깊은 복사는 원본 객체와 독립적으로 사용되어야 하는 경우 유용합니다. 중첩된 객체가 있는 경우에는 각각의 프로퍼티까지 새로운 객체로 복사해주어야 합니다.

따라서, 객체 복사에 대한 결정은 어떤 상황에서 복사를 수행하는지를 고려하여 이루어져야 합니다.