프론트에서 가장 많이 쓰는 JavaScript 내장 자료구조는 단연 배열과 객체일 것이다. 하지만 객체에 비해 Map이 가지는 장점이 있다.
- key에 다양한 자료형을 허용한다.
- map.size를 통해 map의 크기를 O(1)의 시간복잡도로 구할 수 있다.
- map은 삽입 순서를 기억해 삽입된 순서대로 순회한다.
- map은 그 자체가 iterable하기 때문에 내장 메소드 forEach나 for of를 써서 순회할 수 있다.
(object는 먼저 key나 value를 구하고, 그것들을 통해 순회해야 한다.)
프론트 내에서만 사용하는 데이터라면 상관없지만 서버와 통신하는데 사용하는 데이터라면 JSON.stringify()를 통해 직렬화 과정을 거쳐야 한다. Map을 JSON.stringify에 넣으면 어떻게 될까?
Map은 JSON.stringify로 변환되지 않기 때문에 json에 아무것도 담기지 않는다. Map을 직렬화하기 위해서는 Array로 변환하는 중간 과정이 필요하다.
또는 spread syntax를 사용할 수도 있다.
📚 참고자료
How do you JSON.stringify an ES6 Map?
I'd like to start using ES6 Map instead of JS objects but I'm being held back because I can't figure out how to JSON.stringify() a Map. My keys are guaranteed to be strings and my values will alwa...
stackoverflow.com
'배워서 남 주자' 카테고리의 다른 글
| VS code에서 carbon처럼 코드를 예쁘게 캡처할 수 있는 extension (1) | 2023.09.09 |
|---|---|
| react-router-dom의 <Link>로 이미 가지고 있는 데이터 넘겨주기 (0) | 2023.08.22 |
| reflow가 일어나는 속성: border vs. outline (0) | 2023.08.13 |
| mdn 문서 번역에 기여하기 (0) | 2023.07.26 |
| 모노레포(Monorepo)란? (0) | 2023.07.22 |