6. JavaScript에서 얕은 복사와 깊은 복사

자바스크립트에서 객체는 참조 변수로써 데이터의 주소를 공유하게 된다.

 

예를 들어,

const obj1 = {
  property1 : '내용',

  property2 : {

    innerProperty1 : '내용'

  }

}

라는 객체가 있을 때

const obj2 = obj1;

obj2를 위와 같이 할당하였을 때

obj2의 프로퍼티를 수정하게 되면 obj1의 프로퍼티가 같이 수정되게 된다.

위와 같은 상황을 방지하기 위해 객체를 복사할 때 for문을 사용하거나 

const obj2 = Object.assign({}, obj1);

와 같은 메소드를 사용해야 한다.

하지만 객체 안에 배열이나 객체가 또 있게 된다면 그 배열과 객체 자체로 공유되기에 얕은 복사가 이루어진다.

 

내부의 객체나 배열을 복사하기 위한 깊은 복사를 수행하는 방법 중 하나는 외부 라이브러리나 메소드를 사용하는 것이다. 예를 들어, Lodash 라이브러리의 _.cloneDeep() 함수를 사용하거나, JSON 직렬화와 역직렬화를 통해 깊은 복사를 수행할 수 있다.

 

const obj2 = JSON.parse(JSON.stringify(obj1));

 

직렬화는 데이터나 객체를 일련의 바이트 또는 문자열과 같은 텍스트 형식으로 변환하는 프로세스이다. 이것은 데이터를 저장하거나 전송하기 위해 특정 형식으로 표현하는 것을 의미한다.
역직렬화는 직렬화된 데이터를 다시 원래 데이터나 객체 형식으로 변환하는 프로세스이다. 직렬화된 데이터를 역직렬화하면 다시 원래 데이터 또는 객체를 사용할 수 있다.

또는 재귀함수를 사용해서 복사할 수 도 있다.

 

function copyObj(obj) {
    const copy = {};  // 복사할 객체 생성
    for (let key in obj) { // 원본의 프로퍼티네임 key에 접근
      if (typeof obj[key] === 'object') {  // 원본의 프로퍼티가 객체일 경우
          copy[key] = copyObj(obj[key]);  // 재귀함수 호출
      } else {  // 객체가 아닐 경우
          copy[key] = obj[key]; // 일반적으로 복사한다.
      }
    }
    return copy; // 복사된 객체를 반환한다.
}

 

함수 내에서 복사할 프로퍼티가 객체일 경우 다시 같은 함수를 불러내서 다시 복사를 하는 것이다.

객체가 아닐 경우에는 함수 호출 없이 복사를 실시한다.