고유값 모음과 다양한 key를 가진 자료 구조를 사용합니다.
Set은 중복 없는 값의 집합이고 Map은 문자열뿐 아니라 객체 등 다양한 값을 key로 사용할 수 있습니다. size로 항목 수를 확인하며 for...of로 순회할 수 있습니다. 일반 JSON으로 바로 직렬화되지 않으므로 저장 형식으로 바꿀 때 배열 변환이 필요합니다.
Set을 만들 때 넘긴 배열에는 HTML이 두 번 들어 있지만 두 번째 HTML은 무시되어 tags에는 세 값만 남고, 펼칠 때는 처음 추가된 순서대로 나옵니다. progress는 [키, 값] 쌍의 배열로 초기화된 뒤 set으로 JavaScript 항목이 더해지고, get으로 CSS 키를 조회하면 45가 나와 CSS 진도: 45%가 출력됩니다.
일반 객체는 키를 문자열로 바꾸기 때문에 숫자 1과 문자열 1이 같은 속성을 가리키지만, Map은 둘을 서로 다른 키로 구분합니다. 키가 있는지는 has로 확인하고 항목은 delete로 지우며, get은 없는 키에 대해 undefined를 돌려줍니다.
Set의 객체 중복 판단은 내용이 아니라 같은 객체 참조인지로 결정됩니다.
직접 바꿔보세요Set에 CSS를 다시 추가하고 Map의 HTML 값을 100으로 수정하세요.