깊은 복사(deep copy), 얕은 복사(shallow copy)

자바 스크립트의 데이터 타입

기본 데이터 타입 (원시 타입)

string, number, null, undefined, symbol

 

참조형 데이터 타입

Array, Object

 

참조형 데이터는 변수가 객체의 주소를 가리키는 값 -> 복사된 값(주소)이 같은 값을 가리킴.

var obj2 = obj1;

그래서 위와같이 일반적인 복사를 하면 복사한 데이터(obj2)를 수정하면 원본 데이터(obj1)도 같이 변경됨.

-> 얕은 복사가 일어남!!

 

얕은 복사 Shllow Copy

이처럼 객체를 복사할 때 원본과 복사본이 같은 참조주소를 갖는 것을 얕은 복사라고 한다.

 

깊은 복사 Deep Copy

깊은 복사는 복사본의 원본과의 참조가 완전히 끊어진 객체를 말한다.

참조 공간도 같이 복사된다.

 

1. 배열 복사

slice(), concat(), spread, Array.from()을 사용.

이 방법들은 1차원 배열에 한해서만 깊은 복사가 됨.

var arr1 = ['a', 'b', 'c'];

var arr2 = arr1.slice();
var arr3 = [].concat(arr1);
var arr4 = [...arr1];
var arr5 = Array.form(arr1);

 

2. 객체 복사

Object.assign(), spread

1차원 객체에 한해서만 깊은 복사가 됨.

var obj1 = { id: '1', value: 'val1' }

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

 

3. 2차원 이상의 배열, 객체 복사

1. 재귀함수를 직접 구현하여 복사

2. JSON.stringify()

3. lodash 라이브러리 사용

 

1. 재귀함수

const obj1 = { id: '1',  value: 'val2', child: { id: '2', value: 'val2' } };

function deepCopy(obj1) {
  const result = {};

  for (let key in obj1) {
    if (typeof obj1[key] === 'object') {
      result[key] = deepCopy(obj1[key]);
    } else {
      result[key] = obj1[key];
    }
  }

  return result;
}

const obj2 = deepCopy(obj1);

 

2. JSON.stringify() & JSON.parse()

JSON.stringify()는 객체를 json 문자열로 변환하는데 이과정에서 원본 객체와의 참조가 모두 끊어진다.

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

제일 사용하기 간단한 방법이지만 다른 방법에 비해 느리다고 한다.

 

3. lodash의 cloneDeep()

var obj2 = _.cloneDeep(obj1);