얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)

자바스크립트에서의 복사는 얕은 복사(shallow copy)와 깊은 복사(deep copy)가 존재함.

• 깊은 복사(Deep Copy) : 원시 타입(primitive type)의 데이터가 복사 될 때는 새로운 메모리 공간을 생성하여 메모리에 독립적은 값을 저장

• 얕은 복사 (Shallow Copy) : object(객체, 배열, 함수)와 같은 참조 타입(reference type) 데이터는 애초에 저장 시 데이터에 대한 주소가 저장되기 때문에 복사 시 값 자체가 아닌 해당 값을 가리키는 주소가 복사됨

  원시값 : Number / String / Boolean / Null / Undefined
  참조값 : Object / Symbol

• 원시값 : 값을 복사할 때 복사된 값을 다른 메모리에 할당함. 그래서 원래의 값과 복사된 값이 서로에게 영향을 미치지 않음

const a = 1;
let b = a;

b =2

console.log(a);			//결과값 : 1
console.log(b);			//결과값 : 2

• 참조값 : 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킴

const a = {number: 1};
let b = a;

b.number = 2

console.log(a);			//결과값 : {number: 2}
console.log(b);			//결과값 : {number: 2}

얕은 복사(Shallow Copy)

• 객체 안에 객체가 있을 경우 한 개의 객체라도 원본 객체를 참조하고 있다면 -> 얕은 복사

Object.assign()

• Object.assign은 첫 번째 요소로 들어온 객체에 다음 인자로 들어온 객체를 복사 해줌

const obj = {
	a: 1,
    b: {
    	c: 2,
    },
};

const copyObj = Object.assign({}, obj);

copyObj.b.c = 3

obj === copyObj			//결과값 : false
obj.b.c === copyObj.b.c	//결과값 : true

전개연산자

const obj = {
	a: 1,
    b: {
    	c: 2,
    },
};

const copyObj = {...obj}

copyObj.b.c = 3

obj === copyObj			//결과값 : false
obj.b.c === copyObj.b.c	//결과값 : true

깊은 복사(Deep Copy)

• 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체

재귀함수를 이용한 복사

const obj = {
	a: 1,
    b: {
    	c: 2,
    },
};

function copyObj(obj) {
	const result = {};
    
    for (let key in obj) {
    	if (typeof obj[key] === 'object') {
        	result[key] = copyObj(obj[key]);
        } else {
        	result[key] = obj[key];
        }
    }
    return result;
}

const copiedObj = copyObj(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c		//결과값: false (obj.b.c : 2 / copiedObj.b.c: 3)

JSON.stringify()

• JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어짐
• 객체를 json 문자열로 변환 후 JSON.parse()를 이용하여 다시 자바스크립트 객체로 만들어주면 - > 깊은 복사
  => 사용하기는 쉬우나 다른 방법에 비해서 아주 느림 / JSON.stringify 메서드가 함수를 undefined로 처리

const obj = {
	a: 1,
    b: {
    	c: 2,
    },
};

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

copyObj.b.c = 3

obj.b.c === copyObj.b.c 		//결과값: false (obj.b.c : 2 / copiedObj.b.c: 3)

라이브러리 - loadsh

• lodash 모듈의 cloneDeep() 메소드를 이용하여 객체의 깊은 복사가 가능.
  => JSON.stringify() 단점 보완 / 가장 손쉽게 객체의 깊은 복사를 해결하는 방법

// 해당 모듈 설치
npm i lodash

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = _.cloneDeep(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c		//결과값: false (obj.b.c : 2 / copiedObj.b.c: 3)

.
.
.
.
.

참조
https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC
https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-1dus9z79
https://velog.io/@recordboy/JavaScript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%ACShallow-Copy%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%ACDeep-Copy