JS : 얕은 복사, 깊은 복사 (Shallow copy, Deep copy)

변수, 자료형

변수에는 값이 들어가 있지 않음.

변수에는 값이 저장된 메모리 위치가 들어있음.

 

변수에는 기본형(Number, String, Boolean...) 값과

참조형(Object, Array, Function...) 값이 들어갈 수 있음.

 

변수에 기본형 값을 할당할 땐 간단하게 메모리 공간을 추가로 확보하고 값을 저장함.

 

https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/

참조형 값을 할당할 땐 복잡하게 주소가 이어짐.

데이터 영역 주소를 찾아가도 값이 바로 안 나옴. 한 번 더 찾아가야 함.

 

얕은 복사, 깊은 복사

메모리 주소만 대충 복사하면 얕은 복사인거고,

메모리까지 찾아가서 값 꺼내오면 깊은 복사임.

 

얕은 복사는 한 쪽만 값 바꿔도 원본과 복사본 둘 다 값 바뀌고,

깊은 복사는 한 쪽 값 바꿔도 서로 영향 안 미침.

 

기본형 자료형은 구조가 간단해서 웬만하면 메모리까지 찾아가서 깊은 복사 해주는데,

참조형 자료형은 구조가 복잡해서 웬만하면 메모리 주소만 긁어오는 얕은 복사밖에 안됨.

 

등호 : 얕은 복사

let arr1 = [1,2,3];
let arr2 = arr1;

arr2[1] = 100;

console.log(arr1); // [1,2,100]
console.log(arr2); // [1,2,100]

등호로 복사하면 둘이 운명공동체됨. 하나 바꾸면 다른 것도 무조건 바뀜.

 

스프레드 연산자 : 얕은 복사 + 깊은 복사

let arr1 = [1,2,3,[4,5]];
let arr2 = [...arr1];

arr2[1] = 100;
arr2[3][0] = 200;

console.log(arr1); // [1,2,3,[200,5]]
console.log(arr2); // [1,100,3,[200,5]]

스프레드 연산자로 복사하면 기본형은 깊은 복사, 참조형은 얕은 복사 함.

기본형은 바꿔도 영향 안 미치는데 참조형은 영향 미침.

 

JSON.parse(JSON.stringify(obj)) : 깊은 복사

let arr1 = [1,2,3,[4,5]];
let arr2 = JSON.parse(JSON.stringify(arr1));

arr2[1] = 100;
arr2[3][0] = 200;

console.log(arr1); // [1,2,3,[4,5]]
console.log(arr2); // [1,100,3,[200,5]]

기본형은 물론이고 참조형도 깊은복사 됨.

 

참고

• https://www.youtube.com/watch?v=sFaUptwh5bs
• https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/
• https://bbangson.tistory.com/78
• https://www.youtube.com/watch?v=RuDdltsfaVc