[javaScript/공부] 깊은 복사, 얕은 복사

복사 알아보기

 

 

---

       복사? 

객체는 값 자체가 아니라 값의 주소를 통해 데이터를 전달한다.

그래서 객체를 단순히 복사하면, 복사한 객체와 원본 객체가 같은 메모리 주소를 참조하게 되어,

하나를 변경하면 두 객체가 모두 변경되는 오류가 발생한다.

이를 방지하기 위해 깊은 복사(deep copy)와 얕은 복사(shallow copy)라는 개념이 존재한다.

얕은 복사는 대상의 1단계 속성만 복사하는 반면,

깊은 복사는 대상을 완전히 복사하여 중첩된 객체나 배열까지도 새로운 메모리 주소를 갖도록 복사한다

 

 

---

      얕은 복사(shallow copy) 

• 1단계 속성만 복사

const shallowCopy = function(target) {
  let result = {};

  for (let prop in target) {
    result[prop] = target[prop];
  }
  return result;
}

이런식으로 얕은 복사 함수를 만들어 사용하면 된다.

새로운 주소를 부여하는 형식

 

 

---

      깊은 복사(deep copy) 

• 모든 속성 복사

let copyObj = function(target) {
  let result = {};
  
  //배열 복사
  if (Array.isArray(target)) {
    result = target.map((item) => copyObj(item));
  } 
  //객체 복사
  else if (typeof target === 'object' && target !== null) {
    for(let key in target) {
      result[key] = copyObj(target[key]);
    }
  } 
  //나머지 복사
  else {
    result = target;
  }
  return result;
};

 

• 배열을 복사할 때는

배열의 순서가 중요하기 때문에 map()을 사용하여 배열의 각 요소를 하나씩 복사

배열도 객체이기 때문에 Array.isArray() 메서드를 사용한다.

 

• 객체를 복사할 때는

속성이 중요하므로, for...in을 사용하여 각 송성을 복사하고,

그 속성의 값이 객체나 배열이면 그 값도 재귀적으로 깊은 복사

** 재귀적 복사: 자기 자신을 반복하여 계속 복사하는 것

 

• 기본 타입을 복사할 때는

그대로 반환

 

 

 

---

      structuredClone() 

• 깊은 복사를 수행하는 새로운 API다.

• 복잡한 데이터 구조도 모두 복사할 수 있게 도와준다.

• 함수 외에 모두 복사 가능하다.

const copiedObj = structuredClone(obj);

복사하고싶은 변수명을 괄호 안에 넣어 사용하면 된다.

완전 간편..

 

 

---

복사.. 그냥 갖다 붙여넣기만 하거나 새로 만들어줘야 하는 줄 알았는데

알면 알수록 신기한 게 너무 많고 재밌다 (정말?)

공부하다보니 다른 분이

structurdClone()도 알려주시고.. 좋은 API가 참 많다 홀홀