[Javascript] map 자료구조 변수를 깊은 복사하는 법

개요

새로운 메모리에 새로운 변수와 값을 저장하는 게 깊은 복사다. 

원시 타입이 아닌, 참조 타입들(배열 또는 객체 타입)이 이콜 연산자로 변수에 대입하면, 얕은 복사*가 된다.

 

*얕은 복사: 메모리 주소가 변수에 할당된다.

 

 

회사에서 돈 주고 솔루션을 제품에 붙이는 중에, 요구사항 중에 

 

 

데이터를 생성한 날짜별로 묶어서 데이터를 묶음으로 UI 노출을 해야 하는 요구사항이 있었다.

 

솔루션 서버 응답이 리스트여서, 이 데이터를 Map 자료구조 형태로 변환하였다.

 

그런데, 데이터를 수정할 수도 있어야 했는데, 이 때, map 자료구조로 만들어 둔 상태를 수정해야만 했다.

그래서, map 자료구조 상태를 깊은 복사한 새로운 변수를 수정하고, 이 새로운 변수를 상태에 반영하도록 했다.

 

 

map 자료구조 상태 깊은 복사하기

이때 map 자료구조 상태를 깊은 복사하는 방법은 다음과 같다.

// '맵'자료구조로 업데이트
const newMessageMap = new Map(this.getMessageMap.entries());

new Map.entries()는 iterator한 배열[key, value] 형태를 반환한다. 그니까, [[key, value], [key, value], ...] 이렇게 된다는 거다.

 

이를 사용해서, new Map에 첫번째 파라미터로 넣어주면, 동일하지만, 새로운 map 자료구조 객체를 반환한다. 이를 사용하면 깊은 복사다.