프론트엔드/React
NBC - JS 2주차 강의 정리 : Map, Set
장쫑이이
2024. 7. 24. 15:02
Map, Set
Map, Set 의 목적
기존의 객체 또는 배열보다 데이터의 구성, 검색, 사용 등을 효율적으로 처리 가능
1. Map
key, value를 저장
Key에 어떠한 유형(데이터타입)에도 다 들어올 수 있음 (Map은 키가 정렬된 순서로 저장되기 때문)
기능 > 검색, 삭제, 제거, 여부 확인
// 기본 문법
const myMap1 = new Map();
myMap.set("key", "value");
// ...
myMap.get("key");
대량 데이터를 처리하기 위함이기 때문에 반복이 중요하다.
method: keys(), values(), entries()
iterator
반복자라는 의미.
요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어 있는 자료구조.
하나하나 순회하면서 돌면서 체크해 가면서 처리할 수 있게
interator을 사용한 반복의 모습
const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }
console.log(myMap.values()); // [Map Iterator] { 1, 2, 3 }
for ~of 사용
const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
// key
for (const key of myMap.keys()) {
console.log(key);
} // one two, three 출력 > 하나하나 순회를 돌며 출력을 해줌
// value
for (const value of myMap.values()) {
console.log(value);
} // 1, 2, 3 출력
//entries
for (const entry of myMap.entries()) {
console.log(entry);
}
// [ 'one', 1 ]
// [ 'two', 2 ]
// [ 'three', 3 ]
크기 알아내는 법
console.log(myMap.size); // map의 사이즈(길이) 3출력
console.log(myMap.has("two")); // true 출력
2. Set
고유한 값을 저장하는 자료구조
값만 저장 (key 저장하지 않음)
값이 중복되지 않는 유일한 요소로만 구성
값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value2");
console.log(mySet.size); // 2 출력 (같은게 중복되서 한개로 처리)
console.log(mySet.has("value3")); // 존재하는지 찾기위해 has 메서드 사용 / false
interator 반복
const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value2");
for (const value of mySet.values()) {
console.log(value);
}
// value1
// value2 출력