자바스크립트 참조타입과 원시타입 그리고 깊은 복사(DeepCopy)

자바스크립트에서 자료형을 원시타입과 참조타입으로 분류합니다. 참조 타입의 경우 메모리 주소에 저장이 되기 때문에 값을 다른 변수에 복사를 해도 복사 된 변수에서 값을 변경하면 두개의 변수 모두 값이 동일하게 바뀌게 됩니다.

이 부분을 설명하기 위해 참조타입과 원시타입을 알아보고 깊은복사에 대해 알아보고자 합니다.

 

원시타입 자료형 : Number, String, Boolean, null, undefined, Symbol

참조타입 자료형 : Object, Array, Function, Map, Set, RegExp 등

 

원시 타입 변수는 값을 직접 저장하지만, 참조 타입 변수는 값이 저장된 메모리 주소를 참조합니다. 이 차이로 인해 변수 할당과 메모리 사용 방식이 달라집니다.

원시 타입과 참조 타입 변수의 차이

 

 1. 메모리 저장 방식

* 원시 타입: 변수에 직접 값이 저장됩니다. 변수를 재할당하면 새로운 메모리 공간에 값이 저장됩니다.

* 참조 타입: 변수에 값이 저장된 메모리 주소가 저장됩니다. 변수를 재할당하면 새로운 메모리 주소가 저장됩니다.

 

 2. 변수 복사

 * 원시 타입: 변수를 복사하면 새로운 메모리 공간에 값이 복사됩니다.

 * 참조 타입: 변수를 복사하면 메모리 주소가 복사됩니다. 따라서 원본과 복사본이 같은 메모리 공간을 참조하게 됩니다.

 

 3. 변수 비교

 * 원시 타입: 값을 직접 비교합니다.

 * 참조 타입: 메모리 주소를 비교합니다. 같은 객체를 참조하는 경우에만 true를 반환합니다.

 

 4. 변수 변경

 * 원시 타입: 변수 값을 변경하면 새로운 메모리 공간에 값이 저장됩니다.
 * 참조 타입: 변수가 참조하는 객체의 속성을 변경하면 원본 객체가 변경됩니다.

 

깊은 복사(Deep Copy)

깊은 복사는 객체 내부의 모든 속성을 새로운 메모리 공간에 복사하는 것을 의미합니다. 

이를 통해 원본 객체와 복사본 객체가 완전히 독립적으로 존재하게 됩니다.

깊은 복사의 특징

 독립성: 원본 객체와 복사본 객체가 완전히 독립적이므로, 복사본 객체를 수정해도 원본 객체에 영향을 미치지 않습니다.

 중첩 객체 복사: 객체 내부에 다른 객체가 포함되어 있는 경우에도 모든 중첩 객체가 새로운 메모리 공간에 복사됩니다.

 메모리 사용량 증가: 깊은 복사는 객체의 모든 속성을 새로운 메모리 공간에 복사하므로, 메모리 사용량이 증가할 수 있습니다.

 

깊은 복사 방법
 * JSON.parse() + JSON.stringify(): 객체를 JSON 문자열로 변환한 후, 다시 객체로 변환하는 방법입니다.

const originalObj = { a: 1, b: { c: 2 } };
const deepCopiedObj = JSON.parse(JSON.stringify(originalObj));

 

 * lodash의 cloneDeep(): Lodash 라이브러리의 cloneDeep() 함수를 사용하는 방법입니다.

const _ = require('lodash');
const originalObj = { a: 1, b: { c: 2 } };
const deepCopiedObj = _.cloneDeep(originalObj);

 

 * 재귀적 복사: 객체의 속성을 하나씩 순회하며 새로운 객체를 생성하는 방법입니다.

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  
  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }
  
  const newObj = {};
  for (let key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}

const originalObj = { a: 1, b: { c: 2 } };
const deepCopiedObj = deepCopy(originalObj);

이러한 깊은 복사 방법을 사용하면 원본 객체와 완전히 독립적인 새로운 객체를 생성할 수 있습니다

 

얕은 복사: 객체의 최상위 속성만 복사하며, 중첩 객체는 여전히 원본 객체를 참조합니다.

깊은 복사: 객체의 모든 속성을 새로운 메모리 공간에 복사하므로, 원본 객체와 완전히 독립적입니다.

이러한 차이로 인해 깊은 복사가 메모리 사용량이 더 많지만, 원본 객체와의 독립성이 보장됩니다.