JavaScript에서 참조형 복사하기: 배열과 객체의 복사

JavaScript에서 참조형 복사하기: 배열과 객체의 복사

소개

JavaScript에서 참조형(예: 배열과 객체)은 값이 아닌 메모리 주소를 참조합니다. 따라서 변수에 참조형 데이터를 복사하면 원본 데이터에 영향을 줄 수 있습니다. 이 글에서는 참조형 데이터를 안전하게 복사하는 방법과 객체 내부에 배열이 존재할 경우 발생하는 문제를 해결하는 방법을 설명하겠습니다.

얕은 복사 vs. 깊은 복사

• 얕은 복사 (Shallow Copy): 최상위 수준의 프로퍼티만 복사하고, 중첩된 객체나 배열은 원본과 같은 참조를 공유합니다.
• 깊은 복사 (Deep Copy): 중첩된 객체나 배열도 재귀적으로 복사하여 완전히 독립적인 복사본을 만듭니다.

배열 복사하기

배열을 복사할 때는 slice 메서드를 사용하여 얕은 복사를 수행할 수 있습니다.

예시:

let originalArray = [1, 2, 3, [4, 5]];
let copiedArray = originalArray.slice();

copiedArray[0] = 10;
copiedArray[3][0] = 40;

console.log(originalArray); // [1, 2, 3, [40, 5]]
console.log(copiedArray); // [10, 2, 3, [40, 5]]

설명:

• copiedArray는 최상위 수준의 배열 요소만 복사하지만, 중첩된 배열은 원본과 동일한 참조를 가집니다. 따라서 중첩된 배열의 요소를 변경하면 원본에도 영향을 미칩니다.

객체 복사하기

객체는 Object.assign을 사용하여 얕은 복사를 수행할 수 있습니다.

예시:

let originalObj = {
    name: "Alice",
    scores: [10, 20, 30]
};
let copiedObj = Object.assign({}, originalObj);

copiedObj.name = "Bob";
copiedObj.scores[0] = 50;

console.log(originalObj); // { name: "Alice", scores: [50, 20, 30] }
console.log(copiedObj); // { name: "Bob", scores: [50, 20, 30] }

설명:

• copiedObj는 최상위 수준의 프로퍼티만 복사하지만, 중첩된 배열은 원본과 동일한 참조를 가집니다. 따라서 중첩된 배열을 변경하면 원본에도 영향을 미칩니다.

깊은 복사

객체 안에 배열이 존재하는 경우, 중첩된 모든 수준의 데이터까지 복사하려면 깊은 복사를 수행해야 합니다.

방법:
1. JSON:

• JSON.stringify로 객체를 문자열로 변환하고 JSON.parse로 다시 객체로 변환하면 깊은 복사를 수행할 수 있습니다.

• 이 방법은 순환 참조가 없는 경우에만 작동합니다.

  let originalObj = {
      name: "Alice",
      scores: [10, 20, 30]
  };
  let deepCopiedObj = JSON.parse(JSON.stringify(originalObj));
  
  deepCopiedObj.scores[0] = 50;
  
  console.log(originalObj); // { name: "Alice", scores: [10, 20, 30] }
  console.log(deepCopiedObj); // { name: "Alice", scores: [50, 20, 30] }

2. 라이브러리 사용:

   • Lodash와 같은 라이브러리를 사용하여 깊은 복사를 쉽게 수행할 수 있습니다.

   let _ = require('lodash');
   let originalObj = {
       name: "Alice",
       scores: [10, 20, 30]
   };
   let deepCopiedObj = _.cloneDeep(originalObj);
   
   deepCopiedObj.scores[0] = 50;
   
   console.log(originalObj); // { name: "Alice", scores: [10, 20, 30] }
   console.log(deepCopiedObj); // { name: "Alice", scores: [50, 20, 30] }

결론

배열과 객체를 복사할 때는 얕은 복사와 깊은 복사의 차이를 이해하는 것이 중요합니다. 중첩된 데이터가 있다면 깊은 복사를 통해 안전하게 데이터를 복사해야 합니다.