얕은 복사와 깊은 복사

전은찬·2023년 1월 31일
0
post-thumbnail

얕은 복사와 깊은 복사란 무슨 말일까?

먼저 코드로 설명해보겠다.

위처럼 코드를 작성하면 coffee는 copy의 복사본이 된다.
그 후에 복사본 coffee의 값을 재할당하면 원본 copy의 값은 변하지 않고,
복사본인 copy의 값만 변하는 것을 확인할 수 있다.


그렇다면 객체를 복사하면 어떻게 될까?
person2 person1을 넣어보았다.


그리고 person2의 객체 값 name을 변경한 후에 콘솔을 띄워보니..
복사본 person2의 객체 값을 변경하였는데 원본 person1의 객체 값까지 변경되었다.

이는 데이터 타입의 특징때문에 발생한다.

변수에 값을 할당하면 할당된 값 자체가 저장되지만,
객체나 배열에 값을 할당하게 되면 값이 아닌 값이 들어있는 주소가 저장된다.

그래서 위의 person1, person2 코드에서 복사한 경우에는
원본 person1의 값이 복사본 person2에 복사된 것이 아니고 원본 person1의 객체 값이 들어있는 주소를 복사본 person2로 복사했기때문에 같은 주소가 복사되어 원본 person1에 영향을 주는 것이다.

그렇다면 객체는 복사할 수 없나??

당연히 아니다!
객체의 값을 쉽게 복사하려면 스프레드 연산자를 사용하면 된다.

person2에 person1을 복사할 때 person1 앞에 ... 을 찍고 중괄호로 감싸주면 원본에 영향을 주지 않는 제대로된 복사본이 완성된다.
스프레드 연산자가 해당 객체의 모든 값을 개별 요소로 분리해주기 때문에 주소 값이 아닌 객체의 개별 값이 들어오는 것이다.

지금까지 배운 내용을 보면
우선 객체는 주소 값으로 저장하기 때문에 우리가 원하는 복사가 이루어지지않았다.

그럼... 객체 안의 객체가 있다면..?

역시나 객체 안의 객체는 주소 값으로 복사되어 복사본이 원본에 영향을 주었다.
이러한 복사를 얕은 복사(Shallow-Copy)라고 한다.

그렇다면 객체 안의 객체까지 복사하여 원본에 영향을 주지 않는 복사를 할 순 없을까?
JSON.stringifyJSON.parse라는 메서드를 사용하면 가능하다!!

우리는 스프레드 연산자로 객체 값을 주소가 아닌 개별 요소로 분리하여 객체의 값들만을 불러왔었다.
그러한 방법처럼 JSON.stingify라는 메서드로 객체 전체를 문자열로 변환해주고,
JSON.parse로 다시 자바스크립트 객체로 만들어주면 원본에 영향을 주지 않는 제대로 된 복사가 이루어진다.

이를 깊은 복사라고 한다.

위의 코드처럼 JSON.stringify를 사용하는 방식은 간단하다.
이제 다시 JSON.parse를 사용해서 객체로 바꿔보자.


문자열로 복사되었던 person2가 JSON.parse가 적용되어 객체로 변한 것을 볼 수 있다.
그 후에 person2의 favorite.first 즉 객체 안의 객체 값을 바꿔도 원본에 영향을 주지 않는 것을 확인할 수 있다.

profile
no record no memory

0개의 댓글