Q. 얕은복사 vs 깊은복사

🧐 기본형과 참조형

기본형

기본형 데이터는 값을 그대로 할당하는 것이다.
메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로 불변적이다.

• Number
• String
• Boolean
• Symbol(ES6에 추가, 객체 속성을 만드는 데이터 타입)
• null
• undefined

참조형

참조형은 변수에 할당할때 값이 아닌 데이터의 주소를 저장한다.

• Object
• Array
• Function
• RegExp
• Map

---

🧐 얕은 복사(Shallow copy)

객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다.

const person1 = {name:"daeun"};
const person2 = person1;
person1.name = 'lee'; //person1.name === person2.name
person1 === person2; // true - 같은 데이터 주소를 바라보고 있는 두 변수

해당 데이터의 메모리 주소를 전달하게 돼서, 결국 한 데이터를 공유하게 된다.

---

🧐 깊은 복사(Depth copy)

데이터의 공유가 아닌 똑같은 구조의 객체를 하나 더 생성하여 따로 사용해야 할 경우

const person1 = { name: "daeun" };
const person2 = Object.assign({}, person1);
person1.name = "lee";
//person1.name !== person2.name 전혀 다른 메모리 주소의 데이터이므로, person2의 값은 변하지 않음.
person1 === person2 // false - 형태만 같고 각자 다른 메모리 주소에 저장되어 있다

데이터 참조가 아닌 객체의 형태를 그대로 복사하게 함으로써, 한 객체가 변경되도 다른 객체의 데이터에는 영향이 없다.

---

깊은 복사(Depth copy)를 하는 일반적인 방법

• Object.assign()
• Spread Operation

📌 깊은 복사의 함정에 빠지지 말자!!

• 스프레드 연산자로 Obj2 를 새로 생성했다고 해서 깊은 복사가 된게 아니다
• 깊은 복사가 된 것은 제일 바깥의 Depth뿐이다.

const Obj1 = { a: { b: 1 } };
const Obj2 = { ...Obj1 };
Obj1 === Obj2 // false
Obj1.a === Obj2.a // true

📌 완벽한 깊은 복사를 하는 방법

◽ 재귀적으로 깊은 복사를 수행

깊은 복사를 하려는 형태에 맞게 재귀 함수를 만들어서 복사를 해야한다.
사용하는 Object의 Depth가 길어질수록 Time Complexity(시간 복잡도)도 늘어나게 된다.

◽ Lodash의 cloneDeep 함수 사용

자바스크립트 고차함수 집합 및 함수형 라이브러리이다.
Lodash의 cloneDeep 함수를 사용하면, 완벽하게 깊은 복사를 할 수 있다.

◽ JSON.parse()와 JSON.stringify()함수 사용

JSON.stringify 함수를 이용해서, Object 전체를 문자열로 변환 후, 다시 JSON.parse 함수를 이용해서 문자열을 Object 형태로 변환한다. 그러면 문자열로 변환하는 순간 참조 값이 끊기기 때문에 새로운 Object로 만들어 사용할 수 있다. 하지만 JSON 함수는 엄청나게 리소스를 잡아먹는 함수인 만큼, 성능이 좋지 않은 부분을 고려해야 한다

> 참조한 블로그 글