데이터 할당과 데이터 복사 (feat. 깊은 복사, 얕은 복사)

 

 

 

 

자바스크립트에서 모든 데이터는 byte 단위의 식별자(메모리 주솟값)를 통해 구분하고 연결된다. 

 

 

변수 a에 1이라는 데이터를 할당하는 코드는 다음과 같이 작성할 수 있다.

let a; // (1) 변수 a 선언
a = 1; // (2) 변수 a에 데이터 1 할당

(1)의 과정에서는 메모리의 변수 영역에 빈칸을 확보하고 식별자로 a를 지정한다. 

(2)의 과정에서는 데이터 영역에 1을 저장한 뒤, 변수 a가 1의 메모리 주소를 참조하게 한다.

 

 

 

 

 

 

만약 변수 a의 값을 2로 바꾸고 싶다면 a = 2;라는 코드만 작성하면 된다.

하지만 데이터를 재할당한다고 해서 메모리의 데이터 영역에 저장된 1이라는 값은 변하지 않는다.

데이터 영역의 새로운 빈칸에 2를 저장하고, 해당 주소를 변수 영역의 식별자 a가 참조하게 하는 방식으로 데이터 재할당이 일어난다.

이때, 1이라는 데이터를 참조하는 다른 변수가 없다면 해당 데이터는 garbage collecting의 대상이 되어 제거된다.

 

 

 

 

연산을 하는 경우에도 마찬가지이다.

a *= 2;라는 연산을 진행할 때에도 데이터 영역에 저장된 1의 값에 곱하기 연산을 수행하는 것이 아니라 식별자 a가 연산값인 2라는 데이터의 주소를 참조하게 된다.

 

 

 

 

 

만약 a를 복사해서 b라는 변수를 만들고, b에 다른 데이터를 할당한다고 해도 a의 데이터는 변경되지 않는다.

재할당 과정에서 b가 참조하는 데이터만 변경되기 때문이다.

 

let b = a;
b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false

 

 

이렇게 메모리의 데이터 영역에 저장된 값은 gc가 수행되어 제거되지 않는 이상 변하지 않기 때문에 불변값이라고도 부른다.

 

 

 

 

 

참조형 객체의 경우에는 식별자가 데이터의 주소를 직접 참조하는 것이 아니라 중개업자가 끼게 된다.

 

let obj1 = {
  a: 1,
  b: 2,
};

 

위의 예시의 경우에는 obj1이라는 식별자가 변수 영역에서 메모리를 확보한 뒤, obj1의 프로퍼티들을 저장할 변수 영역이 생성된다.

obj1의 변수 영역에 저장된 a, b라는 식별자들은 각각 데이터 영역에 있는 1, 2라는 값의 주소를 참조한다.

또한 데이터 영역에는 a와 b 같은 obj1의 변수들의 주소를 참조하는 데이터가 생성되고, obj1은 이 데이터를 참조하게 된다.

 

 

 

 

위의 obj1이라는 객체를 복사한 obj2라는 객체를 선언하는 가장 간단한 코드는 아래와 같다.

let obj2 = obj1;

 

이렇게 복사한다면 객체들은 아래와 같은 참조 관계를 갖게 된다.

 

 

 

 

이 경우에는 obj1과 obj2가 참조하는 값이 동일하다. 따라서 obj1 === obj2라고 할 수 있다.

그렇기 때문에 만약 obj2의 b값을 변경한다면, 동일한 b 식별자의 참조값이 바뀌기 때문에 obj2 뿐만이 아니라 obj1의 b값도 변경이 된다.

또한 obj1과 obj2는 여전히 동일한 주소를 참조하고 있기에 같은 객체라고 할 수 있다.

 

obj2.b = 3;

console.log(obj1.b); // 3
console.log(obj2.b); // 3
console.log(obj1 === obj2); // true

 

 

 

 

 

이렇게 모든 데이터값의 주솟값이 아닌 바로 아래 단계의 주솟값만 복사하는 것을 얕은 복사라고 부른다.

얕은 복사를 방지하기 위해서는 깊은 복사를 해야 한다.

 

// (1) spread 연산자 사용
let obj3 = { ...obj1 };

// (2) for문 이용
let copy = (obj) => {
  let newObj = {};
  for (let prop in obj) {
    newObj[prop] = obj[prop];
  }
  return newObj;
};
let obj4 = copy(obj1);

obj3.b = 4;
obj4.b = 4;

console.log(obj1.b); // 3
console.log(obj3.b); // 4
console.log(obj4.b); // 4

 

spread 연산자를 사용하던 for문을 사용해 직접 복사하던 obj3, obj4라는 새 객체에 obj1의 각각의 프로퍼티들이 새로 복사되고, 따라서 obj1과 obj3, obj4가 참조하는 주솟값은 서로 다르게 된다.

그렇기에 obj1과 obj3, obj4는 모두 서로 다른 객체이고, obj3이나 obj4의 b 변수의 데이터를 바꾸게 되더라도 obj1에는 영향이 가지 않는다.

 

 

obj4도 동일

 

 

 

하지만 위의 방법들을 사용해서 참조형 데이터를 복사하더라도, 아래의 obj 객체와 같이 참조형 데이터가 참조형 데이터를 프로퍼티로 갖는 경우에는 얕은 복사만 진행된다. 

 

let obj = {
  a: 1,
  b: [1, 2, 3],
};

 

객체의 하위에 있는 참조형 데이터 역시 깊은 복사를 해줘야 하기 때문이다.

깊은 복사는 얕은 복사를 재귀적으로 반복해서 기본형 타입의 프로퍼티의 주솟값을 알아낼 때까지 파고드는 방식으로 진행하면 된다.

 

let deepCopy = (target) => {
  let result = {};
  if (typeof target === 'object' && target !== null) {
    for (let prop in target) {
      result[prop] = deepCopy(target[prop]);
    }
  } else {
    result = traget;
  }
  return result;
};

let newObj1 = deepCopy(obj);

 

 

 

깊은 복사를 진행하는 더 간단한 방법도 있다.

객체나 배열을 통째로 JSON String으로 변환시킨 뒤 다시 JS 자료형으로 파싱 하는 방법이다.

 

let newObj2 = JSON.parse(JSON.stringify(obj));

 

정말 간단한 방식으로 복사가 진행되지만, prototype과 같이 숨겨진 프로퍼티나 여타 메서드 등은 JSON으로 변경이 불가해서 그냥 무시되기 때문에 항상 사용할 수는 없다.

 

 

 

 

 

 

Reference : 정재남, ⌜코어 자바스크립트⌟, 위키북스, 2019