[TypeScript] Map 사용법 정리 - 키-값 기반 데이터 관리

[TypeScript] Map 사용법 정리 - 키-값 기반 데이터 관리

📌 TypeScript Map이란?

Map은 키(Key)와 값(Value) 쌍을 저장할 수 있는 데이터 구조입니다. TypeScript에서 Map은 ES6 Map을 기반으로 하며, 빠른 검색, 추가, 삭제가 가능합니다.

---

📌 1. Map 생성 및 기본 사용법

const myMap = new Map<string, number>();
myMap.set("apple", 10);
myMap.set("banana", 20);
myMap.set("orange", 30);

console.log(myMap);
// Map { 'apple' => 10, 'banana' => 20, 'orange' => 30 }
console.log(myMap.size); // 3

✅ 키-값 쌍을 저장 가능
✅ size 속성으로 요소 개수 확인 가능

---

📌 2. 요소 추가 (set()) & 조회 (get())

const map = new Map<string, number>();
map.set("apple", 5);
map.set("banana", 10);
console.log(map.get("apple")); // 5
console.log(map.get("banana")); // 10
console.log(map.get("grape")); // undefined (없는 키)

✅ set()을 사용하여 키-값 쌍을 저장
✅ get(key)를 사용하여 값 조회 가능

---

📌 3. 요소 존재 여부 (has())

console.log(map.has("apple")); // true
console.log(map.has("grape")); // false

✅ has()를 사용해 특정 키가 존재하는지 확인 가능

---

📌 4. 요소 삭제 (delete()) & 전체 삭제 (clear())

map.delete("banana");
console.log(map); // Map { 'apple' => 5 }
map.clear();
console.log(map); // Map {}

✅ delete(key)를 사용해 특정 키 삭제
✅ clear()를 사용하면 모든 요소 삭제

---

📌 5. Map 순회 (forEach(), for...of)

const map = new Map([
  ["apple", 5],
  ["banana", 10],
  ["orange", 15]
]);

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// apple: 5
// banana: 10
// orange: 15

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

✅ forEach()와 for...of를 이용해 Map을 순회 가능

---

📌 6. Map → Array 변환

const entries = Array.from(map.entries());
console.log(entries);
// [ [ 'apple', 5 ], [ 'banana', 10 ], [ 'orange', 15 ] ]

const keys = Array.from(map.keys());
console.log(keys); // [ 'apple', 'banana', 'orange' ]

const values = Array.from(map.values());
console.log(values); // [ 5, 10, 15 ]

✅ 키 또는 값을 배열로 변환 가능

---

📌 7. Object → Map 변환

const obj = { apple: 5, banana: 10, orange: 15 };
const map = new Map(Object.entries(obj));
console.log(map);
// Map { 'apple' => 5, 'banana' => 10, 'orange' => 15 }

✅ 객체를 Map으로 변환 가능

---

📌 8. Map → Object 변환

const map = new Map([
  ["apple", 5],
  ["banana", 10],
  ["orange", 15]
]);

const obj = Object.fromEntries(map);
console.log(obj);
// { apple: 5, banana: 10, orange: 15 }

✅ Map을 객체로 변환 가능

---

📌 9. Map과 Object 비교

기능 Map Object

키 유형	모든 데이터 타입 가능	문자열 또는 심볼만 가능
순서 유지	✅ (입력 순서 유지)	❌ (순서 보장 안됨)
성능	대량 데이터에서 더 빠름	키가 적을 경우 빠름
size 속성	✅ (size)	❌ (Object.keys(obj).length 필요)

✅ 대량 데이터를 저장하고 빠르게 검색하려면 Map이 유리
✅ 일반적인 객체 데이터 저장은 Object 사용이 적합

---

📌 정리

• Map은 키-값 쌍을 저장하는 효율적인 데이터 구조
• 모든 데이터 타입을 키로 사용할 수 있음
• 객체보다 빠른 검색 및 데이터 관리가 가능
• 배열과 쉽게 변환 가능하며 순회 및 조작이 유연함

✅ 이제 Map을 자유롭게 활용할 수 있겠지? 🚀
추가 질문이 있으면 알려줘! 😊