[Javascript] 얕은 복사와 깊은 복사

🤔 왜 알아야하는가?

코딩을 하다보면 객체를 복사하고 그 복사한 객체를 사용해야되는 경우가 있다.

그 중에서도 원 객체와 연결하여 사용하는 경우와 원 객체의 구조만 가져와 새로운 객체를 생성하여 사용하는 경우가 있다.

그래서 이 얕은 복사와 깊은 복사에 대해 무조건 알아야 한다.

얕은 복사(Shallow copy)

일단 코드를 하나 보자

const cat = {name: "coco"};
const dog = cat;

cat.name = "pong";
console.log(dog.name); // pong
console.log(cat === dog); // true 같은 주소를 쓰고 있다!

객체에 담겨져있는 변수를 다른 변수에 할당하면 데이터를 복사하는 것이 아니라 참조를 하는 것이기 때문에 다른 변수의 데이터도 함께 변경이 된다.

얕은 복사는 해당 데이터의 메모리 주소를 전달하는 복사로 한 데이터를 공유한다.

깊은 복사 (Depth copy)

깊은 복사도 코드를 먼저 보자

const cat = {name: "coco"};
//1
const dog = Object.assgin({}, cat);
//2
const pig = {...cat};

console.log(cat === dog) // false 각자 다른 메모리 주소를 할당!

이렇게 새로운 객체안에 데이터만 가져와서 대입해주는 복사가 깊은 복사다.

방법으로는

1. assgin함수 이용 => Object.assgin();
2. 전개연산자를 이용 => {...이름}

🤯 깊은 복사의 함정

코드를 잠깐 보자

const original = { a: { b: 1 } };

const copy = { ...original };

console.log(copy); // { a: { b: 1 } }

original === copy // false

original.a === copy.a // true

위에서 봤던 깊은 복사와 결과값은 똑같다.

하지만 첫 번째 depth까지만이였다.

두 번째 depth인 a 속성은 같은 메모리 주소를 할당받은 것을 original.a === copy.a // true 여기서 확인할 수 있다.

그렇다.. 첫 번째 depth를 초과하게 되면 얕은 복사를 하게 된다!

그럼 완벽한 깊은 복사는 어떻게 해야될까..

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

• 총 3가지로 추릴 수 있다.

1. 재귀적으로 깊은 복사를 수행
2. cloneDeep 함수를 사용
3. JSON.parse()와 JSON.stringify() 함수를 사용

1번은 재귀 함수를 만들어 복사를 해야하는 귀찮음과 시간복잡도가 올라간다는 단점이 있고

3번은 JSON.stringify를 이용해 문자열로 변환 후에 다시 JSON.parse로 Object형태로 변환하면 참조 값이 끊기면서 새로운 Object를 만들 수 있다.

필자는 3번 방법을 이용해 사용하고 있다.

깊은 복사를 할 때에는 꼭 depth가 얼마정도 되는지 확인 후에 넘어가길 바란다 🙇‍♂️