min

얕은 복사와 깊은 복사에 대하여.... 본문

자바스크립트

얕은 복사와 깊은 복사에 대하여....

minprogramming 2023. 6. 15. 20:19

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에 상관쓰지 않고 쭉 복사 했다는 것을 확인할 수 있다.

따라서 위 출력값에서 확인 할 수 있듯이 원본에는 전혀 지장을 주지 않고 복사가 된 것을 확인할 수 있다.

 

(오늘 매니저님 아니 였으면 평생 오개념이었을 것이다..... 매니저님 감사합니다 ㅠㅠ)