1️⃣ 기본 개념

✅ 얕은 복사 (Shallow Copy)

✅ 깊은 복사 (Deep Copy)

2️⃣ 원시값과 참조값

자바스크립트에서 값은 크게 원시값과 참조값으로 나뉩니다. 이 두 값의 차이점은 특히 복사하는 과정에서 나는데요.

👉 원시값의 복사

원시 값은 데이터의 주소값이 아닌 데이터 자체를 복사합니다.

let test = 1;
let temp = test;

test 변수에서 할당한 원시값 숫자 1 을 temp 변수에 재 할당했습니다.

test = 2;
console.log(test); // 2
console.log(temp); // 1

그 뒤 test 변수에 다시 2 라는 값을 덮어 씌웠는데요. 그래도 temp 변수에는 1 이라는 값이 들어있습니다. 즉, 원시값 복사는 사전적 의미대로 값 자체를 새로이 복사한 셈이됩니다. 복사된 시점부터 두 값은 서로 상관이 없는 별개의 값이 되는거죠.

👉 참조값의 복사

참조 값은 데이터의 주소값을 복사합니다.

let obj = {
  name: "codeit",
};
let obj2 = obj;

obj.age = 27;
console.log(obj);
console.log(obj2);

obj 객체를 obj2 라는 변수에 할당했습니다. 그런 뒤 obj 객체에 새 프로퍼티를 추가했습니다. 하지만 obj2 에도 obj 에 추가한 값이 그대로 들어있습니다. 두 객체 모두 메모리에 저장된 같은 주소값을 가진 값을 참조하기 때문입니다. 즉 둘은 하나의 값을 다른 위치에서 가리키고 있는 것이죠.

이는 바로 얕은 복사에 해당하는 복사 방식입니다. 값의 껍데기만 가리킨다는 느낌으로 얕은 복사라는 이름을 가진것이죠.

깊은 복사는 ?

깊은 복사는 앞서 설명한 원시 값의 복사 방식과 똑같이 값 자체를 복사합니다. 복사라는 행위의 근본에 가까운 방식이죠. 하지만 얕은 복사라는 특이한 방식이 따로 존재하는 것에 대해 의문이 들 수 있습니다. 프로그래밍에서 어떤 문법이 존재 한다는건 누군가의 필요로 의해서 생겨났다는 것이기 때문이죠.

3️⃣ 얕은 복사의 장단점

✅ 장점

👍 주소값만 복사하는 원리 특성상 자원이 덜 듭니다. 개별로 관리되고 변경되어야 할 자료가 아니라면 기준이 되는 하나의 값을 두고 여러 곳에서 참조만 하는 방식이죠. 그렇다보니 성능 면에서도 자연스럽게 이점이 생깁니다. 참조하는 객체가 많아져도 값은 하나기에 추가적인 자원이 그리 많이 들지 않습니다.

👎 하지만 한곳에서 값이 변경되면 다른곳에서도 값이 변경되기에 관리에 주의를 기울여야 합니다. 이전엔 개별로 관리될 필요가 없었다 할지라도 추후에 개별로 관리될 여지가 생길 수 있기에 코드를 짤땐 항상 이런 부분까지 대비하여 유지보수가 쉽도록 코드를 짜는게 좋습니다.

4️⃣ 참조값을 깊은 복사 하려면 ?

가장 대표적으로 JSON 데이터로 변환하는 JSON 메소드를 사용하는 방식입니다.

1️⃣JSON.stringify() 를 사용하여 객체를 JSON 문자열로 변환한 다음, JSON.parse() 로 문자열을 다시 자바스크립트 객체로 변환하는 것이죠. 하지만 경우에 따라 모든 객체를 이와 같은 방식으로 복사 할 수 없습니다.

2️⃣ Lodash와 같은 외부 라이브러리를 사용하면 해당 라이브러리에 내장된 자체 재귀 함수로 복잡한 참조값의 깊은 복사를 알아서 해결해줍니다.

요약 및 정리

• 얕은 복사는 원본의 참조값(주소값) 을 복사합니다.
• 깊은 복사는 복사본과 원본이 전혀 다른 참조값을 가리키게 됩니다. 둘은 별개의 값입니다.
• 자바스크립트에 값은 참조값과 원시값이 있습니다.
• 원시값의 복사는 깊은 복사로 이루어집니다.
• 참조값의 복사는 얕은 복사로 이루어집니다.
• 참조값을 깊은 복사하려면 JSON 직렬화 관련 메소드를 사용한다.