[TypeScript] Map

map은 React.js에서는 주로 배열로 이루어진 데이터를 뿌려줄 때 많이 사용했었는데, 타입스크립트에서 사용법이 조금 특이한 것 같아 간단하게 정리해보고자 한다.

 

---

1. Map이란?

• 자바스크립트와 타입스크립트에서 제공되는 데이터 구조 중 하나로, Key와 Value의 쌍을 저장하는 컬렉션이다. 이 컬렉션은 값에 대한 고유한 키를 사용하여 값을 저장하고 검색하는 데 사용된다.

 

 

2. Map의 특징

1) 고유한 key값

`Map`은 key-value 쌍을 저장하는데, 각 key는 중복될 수 없으며 unique한 고유값이어야 한다. key가 중복될 경우, 가장 마지막 value가 저장된다.

 

2) key-value 쌍으로 저장

각 항목을 key-value의 쌍으로 저장하여, key값을 사용하여 해당 key에 연관된 value를 빠르게 검색할 수 있다.

 

3) 순서 보장

`Map`은 요소를 추가한 순서대로 순서를 보장한다. 따라서 반복문을 사용하여 요소를 순회하면 추가한 순서대로 요소에 접근할 수 있다.

 

 

3. Map을 사용하는 방법

// 1) Map 선언(빈 Map 생성)
const myMap: Map<string, number> = new Map<string, number>();

// 2) 데이어 추가
myMap.set('apple', 1);
myMap.set('banana', 2);
myMap.set('orange', 3);

// 3) 데이터 조회 - 특정 키에 대한 값 가져오기
const appleValue = myMap.get('apple'); // 1

// 4) 데이터 존재 확인 - 특정 키가 Map에 존재하는지 확인
const hasBanana = myMap.has('banana'); // true

// 5) Map 크기 확인
const size = myMap.size; // 3

// 6) 모든 키와 값 순회
myMap.forEach((value, key) => {
  console.log(key, value);
});
// 출력:
// apple 1
// banana 2
// orange 3

// 7) 데이터 삭제 - 특정 키 제거
myMap.delete('orange');

 

1) Map의 선언

• new Map<key, value>()

 

2) 데이터 추가

• set(key, value)를 사용해 key와 value를 저장

 

3) 데이터 조회

• get(key)를 사용하여 특정 키에 대한 값을 가져온다.

 

4) 데이터 존재 여부 확인

• has(key)를 사용하여 특정 key가 Map에 존재하는지 확인

 

5) Map 크기 확인

• size

 

6) 모든 key-value 값 순회

• forEach((value, key))

 

7) 데이터 삭제

• delete(key)를 사용해서 key-value 데이터 삭제

 

 

---

Map을 사용하면 key 값을 사용하여, 해당 객체 정보를 value로 매핑하여 관리할 수 있다. 이를 활용하여 데이터를 저장하고 빠르게 조회할 수 있다.