[JavaScript] 얕은복사 vs 깊은복사 feat. 참조복사

참조복사

객체의 참조 복사는 같은 메모리 주소를 복사한다. 즉, 원본 데이터를 참조복사한 다른 객체의 값이 바뀌게 된다면 원본에 문제가 생길 가능성이 매우 높다. 

let message = '문자 값은 프리미티브 데이터 타입으로 값이 복사됩니다.';
let messenger = {
  name: 'kakao talk',
  manufacture: 'kakao',
};

let text = message;
let conversationTool = messenger;

// 비교 (복사 vs. 참조)
console.log(message == text);
console.log(message === text);
console.log(messenger == conversationTool);
console.log(messenger === conversationTool);

 

위와 같은 방식으로 복사하게 된다면 데이터의 무결성이 침해된다. 그렇다면 메모리 주소가 다른 변수에 해당 내용을 복사해서 옮기면 이런 문제가 생기지 않을까?

얕은 복사

이렇게 저장되는 메모리 주소가 다르면 다른 변수에서 값이 변한다고 하더라도 원본은 침해되지 않는다. 얕은 복사를 하는 방법은 다양하다.

1. for문을 사용한 복사

const cloneObject = {};

for (let i in messenger) {
  cloneObject[i] = messenger[i];
}

2. Object.assign()을 이용한 복사 

const copyObject = Object.assign({}, messenger);

3. 전개 연산자 (...)를 사용한 복사

const spreadObject = { ...messenger };

 

 

위와 같은 방법으로 얕은 복사를 할 수 있다. 하지만 깊이가 2 이상인 객체의 경우 또 다시 참조되는 문제가 발생한다. 이를 해결하기 위해 깊은 복사를 사용한다. 

 

깊은복사

깊은 복사를 구현하기 위해서는 재귀 또는 다양한 라이브러리를 사용할 수 있다.

 

1. 재귀를 통한 깊은 복사

function cloneDeep(object) {
  return Object.fromEntries(
    Object.entries(object).map(([key, value]) => {
      let type = typeof value;
      if (value && type === 'object') {
        value = cloneDeep(value);
      }
      return [key, value];
    })
  );
}

 

2. Lodash 라이브러리 활용

_.cloneDeep(value)