프론트엔드/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 출력