javascript/얕은 복사와 깊은 복사

 

일단 자바스크립트에서 자료형을 크게 두가지로 나눌 수 있다.

 

원시 자료형

Number, String, Boolean, null, undefined 등... 객체도 아니고 method도 가지지 않는 타입
변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되며, 할당한 변수를 조작하면 실제 데이터 값이 조작된다.

 

참조 자료형

배열, 객체, 함수 등...

변수에 참조 자료형을 저장하면 변수에 값이 아닌 주소(객체 참조, 위치 값)를 독립적인 메모리 공간(heap)에 저장하고,

그 공간을 참조하기 위해 주소값을 변수에 할당하는 것이다.

즉 참조 자료형을 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작함

=> 객체가 변경되면 해당 객체를 참조하는 모든 속성이 변경사항을 반영하게 됨

 

---

 

그리고 자바스크립트에서 객체나 배열을 복사해야 할 때가 있다.

복사를 하는 이유에는 대표적으로 다음 세 가지가 있다.

 

1. 원본 데이터를 보호하기 위해

: 직접 수정하면 원본이 바뀌어버리기 때문에, 복사본을 만들어서 원본 데이터에 영향을 주지 않게 처리할 수 있다.

 

2. 상태 관리 시 불변성 보장 (이 부분은 아직 잘 모르겠다. 리액트 수업을 듣게 되면 이해할 수 있을듯...)

: React, Redux 등에서는 상태를 직접 변경하면 안된다. 때문에 복사 -> 새로운 복사본에서 수정 -> 새로운 상태로 교체하는 식으로 변경한다.

 

3. 함수나 라이브러리에 안전하게 데이터를 넘기기 위해

: 함수가 인자로 받은 객체를 내부에서 수정할 수도 있기 때문에, 복사본을 넘기면 함수 내에서 어떤 변경 사항이 있더라도 원본에 영향을 미치지 않는다.

 

---

 

복사 방식에는 깊은 복사(Deep copy), 얕은 복사(Shallow copy)가 있다. 

 

* 얕은 복사

1차원까지는 복사가 되며, 중첩된 참조자료형은 복사가 되지 않고 같은 주소를 공유한다.

 

- 배열

• ...(spread 연산자) : 1차 구조만 복사
• slice() : 원시값이면 별개 복사되고, 참조값이면 주소가 복사돼 원본과 연결됨 (즉 1차원만 복사함)
  • 배열의 원소가 원시값일 때 => 값 자체가 복사됨
  • 배열의 원소가 참조값일 때 => 참조(주소)를 복사
• (복사 아님!!) 배열의 원본을 아예 변경하는 메소드 : push, pop, shift, sort, unshift, splice 등

배열을 slice()로 복사했을 때 예시 🔽 

// ----- 배열의 요소가 원시값일 때 -----
let arr1 = ['aibao', 'fubao']; // aibao, fubao
let arr2 = arr1.slice(); // aibao, fubao

arr2[1] = 'huibao';

console.log('arr1 : ' + arr1); // arr1 : aibao, fubao
console.log('arr2 : ' + arr2); // arr2 : aibao, huibao

// ----- 배열의 요소가 참조값일 때
let arr1 = [{name: 'aibao'}, {name: 'fubao'}];
let arr2 = arr1.slice();

arr2[1].name = 'huibao';

console.log('arr1 : ', arr1);
console.log('arr2 : ', arr2);

 

 

- 객체 : ...(spread 연산자), Object.assign();

 

 

* 깊은 복사

내부 참조 데이터까지 완전히 새로 복사하여, 얕은 복사와 달리 원본과 완전 독립시킨다. 원본과 복사본은 완전히 독립적인 메모리를 차지하게 돼 참조를 공유하지 않는다.

 

자바스크립트에는 자체적으로 깊은 복사를 하는 방법은 없어서 다음과 같은 방법을 사용할 수 있다.

 

1. JSON 객체를 활용 

성능은 가장 빠르지만 코드가 복잡해지며, JSON 문자열로 변환이 가능한 객체만 복사가 가능하다. 아닌 객체(function)는 undefined로 처리가 된다.

const arr1 = [{ name: "aibao" }, { name: "fubao" }];
const arr2 = JSON.parse(JSON.stringify(arr1));

arr2[1].name = "huibao";

console.log("arr1 : ", arr1);
console.log("arr2 : ", arr2);

 

2. Lodash같은 라이브러리 사용

Lodash의 clonedeep 메소드를 사용한다. 단점은 성능이 좀 느리며, 설치를 해야한다. 대신 함수도 깊은 복사가 가능하다.

 

3. structuredClone() 사용

간편하며 가독성이 좋지만 함수는 깊은 복사가 불가능하다.

const arr1 = [{ name: "aibao" }, { name: "fubao" }];
const arr2 = JSON.parse(JSON.stringify(arr1));

arr2[1].name = "huibao";

console.log("arr1 : ", arr1);
console.log("arr2 : ", arr2);

 

4. 재귀함수를 통해 구현

복잡하다....

 

 

 

 

참고
https://developer.mozilla.org/ko/docs/Glossary/Shallow_copy
https://sung-98.tistory.com/111
https://puk0806.tistory.com/117
https://bbangson.tistory.com/78