<Javascript> 얇은 복사, 깊은 복사

얇은 복사

스프레드 연산자...가 주로 얇은 복사를 수행한다.

얇은 복사로 값을 복사하면, 이전 참조 객체의 메모리 주소를 똑같이 참조하기 때문에 데이터 변경시에 유의해야한다.

const originalObject = {
  a: 1,
  b: {
    c: 2
  }
};

// 얕은 복사
const shallowCopy = { ...originalObject };

shallowCopy.a = 10; // 이 변경은 원본 객체에 영향을 미치지 않음
shallowCopy.b.c = 20; // 이 변경은 원본 객체에도 영향을 미침

console.log(originalObject); // { a: 1, b: { c: 20 } }
console.log(shallowCopy);    // { a: 10, b: { c: 20 } }

깊은 복사

깊은 복사를 하기 위해서는 새로운 변수를 만들고, 모든 값이 이전과 달리 값은 동일하지만 참조값 (참조 메모리 주소)는 다르다.
때문에 데이터를 변경하여도, 기존 변수의 데이터는 변경되지 않고 깊은 복사를 수행한 변수의 데이터만 변경된다.

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

  if (Array.isArray(obj)) {
    const arrCopy = [];
    obj.forEach((item, index) => {
      arrCopy[index] = deepCopy(item);
    });
    return arrCopy;
  }

  const objCopy = {};
  Object.keys(obj).forEach(key => {
    objCopy[key] = deepCopy(obj[key]);
  });
  return objCopy;
}

// 원본 객체
const originalObject = {
  a: 1,
  b: {
    c: 2
  }
};

// 깊은 복사
const deepCopiedObject = deepCopy(originalObject);

deepCopiedObject.a = 10; // 이 변경은 원본 객체에 영향을 미치지 않음
deepCopiedObject.b.c = 20; // 이 변경은 원본 객체에 영향을 미치지 않음

console.log(originalObject);     // { a: 1, b: { c: 2 } }
console.log(deepCopiedObject);   // { a: 10, b: { c: 20 } }