깊은복사와 얕은복사

📌요약

얕은 복사란, 참조형 타입의 값이 바로 아래 단계의 값만 복사하는 방법이다.
깊은 복사란, 참조형 타입 안의 모든 참조가 끊어지는 방법이다.

📌데이터 타입

• 기본형(Primitive) 타입
• 참조형(Reference) 타입

기본형 타입에는 Number, String, Boolean, undefined, null, 그리고 ES6에서 추가된 Symbol이 있다.

참조형 타입은 Object, Array, Function, Date, RegExp, 그리고 ES6에서 추가된 Map, WeakMap, Set, WeakSet이 있다.

기본형과 참조형을 구분할 수 있는 방법은, 할당이나 연산 시 값을 복사하면 기본형이고, 값을 참조하면 참조형이다.

📌기본형의 복사순서

기본형의 데이터타입은 불변형이다.
즉 메모리 확보 후 값을 저장하고 메모리주소를 활용해 값을 할당한다.

var a = 10;
a = 20;
console.log(a); // 20

1. 메모리 공간 확보 후 다른 공간에 10을 할당한다.
2. 그 주소를 a에 대입한다
3. 20이 재할당 될 때 새로운 메모리를 확보 후 20을 할당한다
4. 그 주소를 a에 대입한다
5. 10이 저장된 메모리는 가비지컬렉터가 처리한다.

가비지컬렉션의 수행기준 https://ko.javascript.info/garbage-collection

깊은복사

1. 재귀함수를 이용

var deepCopy = function (obj) {
  var result = {};
  if (typeof obj === 'object' && obj !== null) {
    for (var prop in obj) {
      result[obj] = deepCopy(obj[prop]);
    }
  } else {
    result = obj;
  }
  return result;
};

• deepCopy 함수는 함수 내부에서 자기 자신을 호출하는 재귀 함수다. 중첩된 객체라고 하더라도 프로퍼티 갯수만큼 돌면서 result 객체에 새롭게 할당해준다.

2. JSON.parse(JSON.stringify(obj))를 사용

var obj1 = {
  a: 10,
  b: 'abc',
};
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b = 3;
console.log(obj1); // {a: 10, b: 'abc'}
console.log(obj2); // {a: 10, b: 3}

• JSON.stringify()는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. 그리고 JSON.parse()는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. 즉, 객체를 문자열로 변환 후 다시 객체 형태로 만든다. 문자열로 변환후 다시 객체로 만들면 원본 객체와의 참조가 모두 끊어진다.

참조형의 얕은복사

var obj2 = { ...obj1 };
Object.assign()
for … in
1차원의 데이터만 깊은복사가 일어나고 그 내부에선 얕은복사가 일어난다

= 원본값이 달라질 수 있으므로 위험하다

참조
https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/