[Javascript] 참조형 데이터의 메모리 할당과 얕은 복사, 깊은 복사

참조형 데이터

먼저 자바스크립트의 데이터 타입 중 참조형으로는 이런 것들이 있다.

• Object
• Array
• 함수(function)
• Date
• 정규표현식
• Map, Set 자료 구조
• + null도 object 타입!

 

 

참조형 타입들은 아래와 같은 형태로 값을 참조하고 있다.

실제 객체 내 프로퍼티들이 담긴 주소 값들을 데이터로 갖고 있는 주소 값!.. 을 복사해서 참조하고 있기 때문에 참조형이라고 부른다.

 

 

1. obj1을 위한 별도의 데이터 영역 안의 프로퍼티들은 또 그 안에서 각각의 메모리를 할당받고 있다. (위의 주소 7103~7104 부분)

2. 데이터 영역 안에 프로퍼티들의 주소 값이 별도의 메모리 할당을 받는다.

3. obj1은 2의 주소 값을 참조한다.

 

결국 기본형과의 차이는 기본형은 값을 가리키는 주소값을 바로 복제하는 반면,

참조형은 주소 값이 담긴 주소 값을 복제한다는 것!..

 

 

얕은 복사와 깊은 복사

얕은 복사

참조형 데이터는 주소 값에 따라 얼마든지 값이 바뀔 수 있다.

const obj1 = {
    a: 123,
    b: 'abc',
};

const obj2 = obj1; // obj1의 주소값을 참조
obj2.a = 456;

위와 같은 예시를 들었을 때 obj1도 값이 똑같이 바뀌는 것을 볼 수 있다.

그야 obj2는 obj1의 주소 값을 참조하니 두 객체는 같다!...

 

결국 obj2의 프로퍼티 값을 바꾸었지만 obj1까지 영향이 간다. 의도치 않게 기존 변수까지 수정이 되어버린 것.. 😂

이렇게 객체의 참조값을 복사하는 것을 얕은 복사라고 한다.

 

 

깊은 복사

깊은 복사는 위와 같이 주소 값만 복제되는 것이 아니라, 내부 값을 모두 복사하여 새로운 메모리를 할당한다.
고로 원본 객체와의 참조가 모두 끊어진 상태인 불변 객체가 된다.

 

 

내부 값을 복사하는 것이라면 반복문이나.. 새로운 객체 만드는 함수 만들어서 복사하면 되지 않나? 🤔 싶을 수도 있다.
하지만 이 경우는 프로퍼티가 무수히 많을 경우에는 답이 없다는 점과..
아래처럼 중첩 객체인 경우 프로퍼티 b와 c 같은 경우는 얕은 복사가 된다는 점!...

const obj = {
  a: 123,
  b: [1, 2, 3],
  c: {
    name: 'troy',
    age: '20',
  },
};

const copyObject = (target) => {
  const result = {};
  for (const prop in target) {
    result[prop] = target[prop];
  }
  return result;
};

const obj2 = copyObject(obj);
obj2['d'] = 'def';

음, 언뜻 보기에 obj와 obj2는 다른 객체인 것 같지만 결국 obj.b와 obj2.b는 동일한 주소 값을 참조하고 있기 때문에 같다.

 

 

 

그럼 깊은 복사는 어떻게 해야 좋을까?? 깊은 복사를 하는 방법으로는 이런 것들이 있다.

 

JSON.parse()와 JSON.stringify()를 이용하기

JSON 데이터로 변환했다가 다시 object로 변환하는 과정을 거치면 이 과정 안에서 새로운 객체가 만들어진다.
가장 간단하다고 할 수 있는 방법이지만 다른 방법에 비해 속도가 느리다는 단점..

const obj = {
  a: 1,
  b: {
    c: null,
    d: [1, 2],
  },
};

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

obj2['c'] = 3;

위 결과를 보면 두 개는 다른 객체임을 볼 수 있다.

 

 

재귀 함수로 구현하기

좀 더 복잡하지만 재귀함수로 구현하는 방법이 있다.

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

  if (typeof target === 'object' && target !== null) {
    for (const prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  } else {
    result = target;
  }
  return result;
};

const obj = {
  a: 1,
  b: {
    c: null,
    d: [1, 2],
  },
};

const obj2 = copyObjectDeep(obj);
obj2['c'] = 345;

 

역시 위와 동일한 결과!..

 

 

Object.assign() 메서드와 Spread 연산자도 1 depth 까지는 깊은 복사가 된다고 한다. 🙂