자바스크립트 객체 데이터 복사 방법

자바스크립트에서 객체 데이터를 복사하고자 할 때, 일반적으로 얕은 복사(shallow copy)와 깊은 복사(deep copy) 두 가지 방법이 사용됩니다.

1. 얕은 복사 (Shallow Copy)

얕은 복사는 원본 객체의 프로퍼티들을 순회하며, 참조 타입인 경우에는 참조만을 복사하는 방법입니다. 그러므로 원본 객체와 복사된 객체 사이에는 여전히 참조 관계가 유지됩니다.

아래는 얕은 복사를 수행하는 함수 예시입니다.

function shallowCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj; // 원시 타입인 경우 그대로 반환
  }
  
  const copy = Array.isArray(obj) ? [] : {};
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) { // 객체 자신의 프로퍼티인 경우에만 복사
      copy[key] = obj[key];
    }
  }
  
  return copy;
}

위 코드에서는 주어진 객체 obj의 타입이 원시 타입인 경우에는 그대로 반환하고, 그렇지 않은 경우에는 새로운 객체 copy를 생성하여 프로퍼티를 복사합니다. Array.isArray(obj) 메서드를 사용하여 배열인지 객체인지를 판별하고, 복사될 객체를 적절히 생성합니다. 그리고 for...in 문을 사용하여 프로퍼티를 복사합니다.

2. 깊은 복사 (Deep Copy)

깊은 복사는 원본 객체의 모든 프로퍼티를 순회하면서, 참조 타입인 경우에는 값을 복사하여 새로운 객체를 생성하는 방법입니다. 이렇게 함으로써 원본 객체와는 완전히 독립적인 새로운 객체가 생성됩니다.

깊은 복사를 수행하는 가장 간단한 방법은 JSON.stringify()와 JSON.parse() 함수를 함께 사용하는 것입니다. 아래는 깊은 복사를 수행하는 함수 예시입니다.

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

위 코드에서는 JSON.stringify() 함수를 사용하여 객체를 JSON 문자열로 변환하고, JSON.parse() 함수를 사용하여 JSON 문자열을 다시 객체로 변환합니다. 이러한 접근 방식은 복잡한 객체 구조에 대해서도 잘 동작하지만, 함수, 정규표현식 및 undefined와 같이 JSON으로 직렬화할 수 없는 값들은 복사하지 못하는 단점도 있습니다.

결론

얕은 복사와 깊은 복사는 객체 데이터를 복사하는 두 가지 주요 방법입니다. 각 방법은 각자의 장단점을 가지고 있으니 상황에 맞게 선택하여 사용하시면 됩니다.