📝 Study Notes/Web
JS : 얕은 복사, 깊은 복사 (Shallow copy, Deep copy)
lazyArtisan
2024. 6. 17. 17:06
변수, 자료형
변수에는 값이 들어가 있지 않음.
변수에는 값이 저장된 메모리 위치가 들어있음.
변수에는 기본형(Number, String, Boolean...) 값과
참조형(Object, Array, Function...) 값이 들어갈 수 있음.
변수에 기본형 값을 할당할 땐 간단하게 메모리 공간을 추가로 확보하고 값을 저장함.
참조형 값을 할당할 땐 복잡하게 주소가 이어짐.
데이터 영역 주소를 찾아가도 값이 바로 안 나옴. 한 번 더 찾아가야 함.
얕은 복사, 깊은 복사
메모리 주소만 대충 복사하면 얕은 복사인거고,
메모리까지 찾아가서 값 꺼내오면 깊은 복사임.
얕은 복사는 한 쪽만 값 바꿔도 원본과 복사본 둘 다 값 바뀌고,
깊은 복사는 한 쪽 값 바꿔도 서로 영향 안 미침.
기본형 자료형은 구조가 간단해서 웬만하면 메모리까지 찾아가서 깊은 복사 해주는데,
참조형 자료형은 구조가 복잡해서 웬만하면 메모리 주소만 긁어오는 얕은 복사밖에 안됨.
등호 : 얕은 복사
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]]기본형은 물론이고 참조형도 깊은복사 됨.