min
얕은 복사와 깊은 복사에 대하여.... 본문
1. 얕은 복사
얕은 복사는 말 그대로 얕게 비교하는 것을 말한다.
이대 "얕게"라는 말이 추상적으로 들릴 수 있다. 이를 구체화 하자면 뎁스의 차이다.
즉 내가 복사 할려고 하는 깊이가 어디까지 되는 지에 따라서 얕은 복사와 깊은 복사로 나뉜다.
얕은 복사는 1depth까지만 완전히 복사가 가능하다는 뜻으로 대표적인 예시로는 스프레드 연산자, 대입 연산자가 있다.
arr = [1,2,3,4]
// 얕은 복사
arr2 = [...arr]
console.log(arr2)
이때 많은 사람들이 착각하는 경우가 스프레드 연산자는 깊은 복사라고 생각하는 경우다. (작성자도 그랬다... ㅠㅠ)
하지만 스프레드 연산자는 얕은 복사다.
그 이유를 설명하는 코드를 보여주겠다.
arr = [[1], 2, 3, 4, 5];
arr2 = [...arr];
arr2[0].push(6);
console.log(arr, arr2);
//실행 결과 : [ [ 1, 6 ], 2, 3, 4, 5 ] [ [ 1, 6 ], 2, 3, 4, 5 ]
위 실행 결과를 보면 arr를 완전히 복사해오지 못했다. 즉 만약에 진짜로 복사를 했다면 이런 결과가 출력되었을 것이다.
실행결과 : [ [ 1 ], 2, 3, 4, 5 ] [ [ 1, 6 ], 2, 3, 4, 5 ]
즉 얕은 복사의 경우에는 1 depth까지만 완전히 복사되고 2depth부터는 완전히 복사되지 못한 경우를 뜻한다.
2. 깊은 복사
깊은 복사는 말 그대로 depth에 상관없이 완전히 복사되는 것을 깊은 복사라고 한다.
let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];
let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));
// Change the value of the 'list' property in ingredients_list_deepcopy.
ingredients_list_deepcopy[1].list = ["rice flour", "water"];
// The 'list' property does not change in ingredients_list.
console.log(ingredients_list[1].list);
// Array(3) [ "eggs", "flour", "water" ]
위 코드의 실행결과를 보면 알 수 있듯이 깊은 복사의 경우에는 우리가 원하던 출력값이 도출 된것을 확인 할 수 있다.
즉 깊은 복사는 원래의 원본에 영향을 주지 않으며 depth에 상관쓰지 않고 쭉 복사 했다는 것을 확인할 수 있다.
따라서 위 출력값에서 확인 할 수 있듯이 원본에는 전혀 지장을 주지 않고 복사가 된 것을 확인할 수 있다.
(오늘 매니저님 아니 였으면 평생 오개념이었을 것이다..... 매니저님 감사합니다 ㅠㅠ)
'자바스크립트' 카테고리의 다른 글
VE vs LE에 대하여... (4) | 2023.06.20 |
---|---|
event.preventDefault() vs event.stopPropagation() 에 대하여... (0) | 2023.06.19 |
이벤트 버블링에 대하여... (0) | 2023.06.19 |
실행컨택스트와 이벤트 루프에 대하여..... (0) | 2023.06.15 |
원시타입과 참조타입 (0) | 2023.05.22 |