[JS/Node] 얕은 복사, 깊은 복사

레퍼런스 코드

객체 obj 안에 객체를 value로 갖는 c가 있는 상황

let obj = {
  a: 1,
  b: 2,
  c: {
	x: 3,
    y: 4
  }
}
	

단순 복사(=, 대입 연산자)

원본 객체의 주소값을 할당하는 행위
두 객체는 서로 변화를 공유한다.

let obj = {
  a: 1,
  b: 2,
  c: {
	x: 3,
    y: 4
  }
}

let copyObj = obj

얕은 복사(shallow copy)

새로운 객체에 원본 객체의 프로퍼티의 값을 정확히 복사한다.

프로퍼티의 값이 '객체'인 경우

객체의 '주소값' 복사

복사된 객체는 원본 객체와 동일한 프로퍼티와 값들을 새롭게 가지지만, 주소가 복사된 프로퍼티는 같은 값을 공유하게 된다.

복사된 객체가 변경될 경우 원본 객체의 해당 값에 영향을 미친다

1. Object.assign({}, obj)

Object.assign({}, obj)

let obj = {
  a: 1,
  b: 2,
  c: {
	x: 3,
    y: 4
  }
}
let copyObj = Object.assign({}, obj);
	

2. spread operator(spread 연산자)

Spread 연산자를 이용한 복사는 얕은(shallow) 복사를 수행한다.
배열 안에 객체가 있는 경우에는 객체 자체는 복사되지 않고 원본 값을 참조한다.
따라서 원본 배열 내의 객체를 변경하는 경우 새로운 배열 내의 객체 값도 변경됩니다.

깊은 복사(deep copy)

'값 자체'의 복사

프로퍼티의 값이 '객체'인 경우

새로운 메모리 공간을 확보해 생성하기 때문에,
복사된 객체의 값인 객체가 변경될 경우 본 객체의 해당 값에 영향을 미치지 않는다.

loop => 재귀

loop를 재귀로 변경

let obj = {
  a: 1,
  b: 2,
  c: {
	x: 3,
    y: 4
  }
}
function deepCopy(obj) {
  if (obj === null || typeof(obj) !== "object") {
    return obj;
  }
    
  let copy = {};
  for(let key in obj) {
    copy[key] = deepCopy(obj[key]);
  }
  return copy;
}


// 출처: https://mygumi.tistory.com/322 [마이구미의 HelloWorld]

JSON

JSON

let obj = {
  a: 1,
  b: 2,
  c: {
	x: 3,
    y: 4
  }
}
let copyObj = JSON.parse(JSON.stringify(obj));
	
// 출처: https://mygumi.tistory.com/322 [마이구미의 HelloWorld]

라이브러리(jQuery, lodash...)

jQuery

let copyObj = $.extend(true, {}, obj);

lodash

let copyObj = _.cloneDeep(obj);