[lodash] cloneDeep, clone 메소드를 사용한 객체의 깊은 복사와 얕은 복사 방법

객체를 복사할 때 얕은 복사와 깊은 복사는 중요한 개념입니다. 얕은 복사는 원본 객체와 복사된 객체가 같은 메모리 주소를 참조하며, 깊은 복사는 원본 객체와 복사된 객체가 서로 다른 메모리 주소를 참조하는 것입니다. Lodash의 clone 메소드와 cloneDeep 메소드를 활용하여 객체의 얕은 복사와 깊은 복사하는 방법에 대해서 알아보겠습니다.

객체의 얕은 복사 clone()

Lodash에서 제공하는 clone 메소드는 얕은 복사 기능을 수행합니다. 이는 원본 객체의 속성을 복사하여 새로운 객체를 생성하지만, 하위 객체는 참조 관계를 유지한다는 의미입니다. 그러므로 원본 객체와 복사된 객체가 같은 메모리 주소를 참조할 수도 있습니다.

const _ = require('lodash');

const originalObject = {
  name: 'Lee',
  age: 18,
  address: {
    city: 'seoul',
    country: 'KOREA'
  }
};

// 객체의 얕은 복사
const shallowCopyObject = _.clone(originalObject);

// 원본 객체와 복사된 객체 비교
console.log(originalObject === shallowCopyObject); // false

// 하위 객체는 참조 관계를 유지
console.log(originalObject.address === shallowCopyObject.address); // true

위 예제에서 clone 메소드를 사용하여 originalObject를 shallowCopyObject로 얕은 복사한 결과, 두 객체는 서로 다른 메모리 주소를 참조합니다. 하지만 address 속성의 하위 객체는 참조 관계를 유지하여 같은 메모리 주소를 가리키고 있습니다.

객체의 깊은 복사, cloneDeep()

lodash 메소드 중에서 제일 많이 사용하는 cloneDeep 메소드는 깊은 복사 기능을 수행합니다. 깊은 복사는 원본 객체의 모든 속성과 하위 객체들을 재귀적으로 복사하여 새로운 객체를 생성합니다. 따라서 원본 객체와 복사된 객체는 서로 다른 메모리 주소를 참조하게 됩니다.

const _ = require('lodash');

const originalObject = {
  name: 'Lee',
  age: 18,
  address: {
    city: 'seoul',
    country: 'KOREA'
  }
};

// 객체의 깊은 복사
const deepCopyObject = _.cloneDeep(originalObject);

// 원본 객체와 복사된 객체 비교
console.log(originalObject === deepCopyObject); // false

// 하위 객체도 새로운 객체로 생성하여 참조 관계 유지하지 않음
console.log(originalObject.address === deepCopyObject.address); // false

위 예제에서 cloneDeep 메소드를 사용하여 originalObject를 deepCopyObject로 깊은 복사한 결과, 두 객체는 서로 다른 메모리 주소를 참조합니다. 또한 address 속성의 하위 객체도 새로운 객체로 생성되어 참조 관계를 유지하지 않습니다.