JavaScript 배열 복사: 얕은 복사 vs. 깊은 복사

by

배열을 복사할 때, JavaScript에서는 얕은 복사와 깊은 복사라는 두 가지 주요 방법을 사용합니다. 이러한 복사 방법은 배열 내부의 요소들을 어떻게 다룰지에 따라 다릅니다. 이 블로그 포스팅에서는 얕은 복사와 깊은 복사의 차이를 이해하고 각각의 방법을 어떻게 사용하는지 살펴보겠습니다.


얕은 복사 (Shallow Copy)

얕은 복사는 원래 배열과 새로운 배열이 같은 레퍼런스(메모리 주소)를 공유하는 경우입니다. 따라서 원래 배열이나 새로운 배열 중 하나를 수정하면 다른 배열도 수정됩니다. 이 방법은 배열의 내부 요소가 기본 데이터 타입인 경우에 적합합니다.


방법 1: 스프레드 연산자 (Spread Operator) 사용

const originalArray = [1, 2, 3];
const shallowCopy = [...originalArray];


방법 2: Array.from() 메서드 사용

const originalArray = [1, 2, 3];
const shallowCopy = Array.from(originalArray);



깊은 복사 (Deep Copy)

깊은 복사는 원래 배열과 새로운 배열이 서로 다른 레퍼런스를 가지며, 원래 배열의 내부 요소를 재귀적으로 복사하여 새 배열을 생성합니다. 이 방법은 배열의 내부 요소가 객체 또는 다른 배열과 같은 참조 데이터 타입인 경우에 사용됩니다.


방법 1: JSON 객체를 이용한 깊은 복사 (주의: 함수 포함 불가)

const originalArray = [{ name: 'Alice' }, { name: 'Bob' }];
const deepCopy = JSON.parse(JSON.stringify(originalArray));


방법 2: 재귀 함수를 사용한 깊은 복사

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }

  const objCopy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      objCopy[key] = deepCopy(obj[key]);
    }
  }
  return objCopy;
}

const originalArray = [{ name: 'Alice' }, { name: 'Bob' }];
const deepCopy = deepCopy(originalArray);


깊은 복사는 객체 내에 중첩된 객체 또는 배열을 잘 처리하며, 참조 데이터 타입을 가진 요소를 완전히 복사합니다. 하지만 주의해야 할 점은 JSON 방법은 함수를 복사하지 않으며, 재귀 함수를 사용하는 방법은 프로토타입 체인을 복사하지 않습니다. 필요에 따라 적절한 방법을 선택하여 배열을 복사하십시오.

이렇게 JavaScript에서 배열을 복사하는 얕은 복사와 깊은 복사의 개념과 사용법을 알아보았습니다. 배열 복사는 코드에서 중요한 부분이며, 상황에 맞게 올바른 방법을 선택하는 것이 중요합니다.



Leave a Comment