[자바스크립트 코테 준비] Map 정리하기

1. Map이란?

Map은 키(key)와 값(value)을 쌍으로 저장하는 데이터 구조입니다.

일상생활 속 Map의 예시

• 사물함: 사물함 번호(키)와 그 안의 물건(값)
• 전화번호부: 이름(키)과 전화번호(값)
• 학생 명부: 학번(키)과 학생 정보(값)

Object와 Map의 차이

키의 유연성

• Object: 문자열과 Symbol만 키로 사용 가능
• Map: 모든 값(함수, 객체, 숫자 등)을 키로 사용 가능

순서 보장

• Object: 키의 순서가 보장되지 않음
• Map: 삽입한 순서대로 보장됨

크기 확인

• Object: 크기를 직접 계산해야 함
• Map: size 속성으로 쉽게 확인 가능

2. Map 기본 사용법

생성

// 빈 Map 생성
const map = new Map();

// 초기값과 함께 생성
const mapWithInit = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);

기본 메서드

// 값 추가
map.set('key', 'value');

// 값 가져오기
map.get('key');

// 키 존재 여부 확인
map.has('key');

// 값 삭제
map.delete('key');

// 전체 삭제
map.clear();

// 크기 확인
map.size;

3. Map 순회하기

for...of 사용

// 키-값 쌍 순회
for (const [key, value] of map) {
    console.log(key, value);
}

// 키만 순회
for (const key of map.keys()) {
    console.log(key);
}

// 값만 순회
for (const value of map.values()) {
    console.log(value);
}

forEach 사용

map.forEach((value, key) => {
    console.log(key, value);
});

4. Map 변환

배열 변환

// Map을 배열로 변환
const array = Array.from(map);
// 또는
const array2 = [...map];

// 키 배열 얻기
const keysArray = Array.from(map.keys());

// 값 배열 얻기
const valuesArray = Array.from(map.values());

객체 변환

// Map을 객체로 변환
const obj = Object.fromEntries(map);

// 객체를 Map으로 변환
const map = new Map(Object.entries(obj));

5. Map 정렬

키 기준 정렬

// 오름차순 정렬
const sortedMap = new Map(
    [...map].sort((a, b) => a[0].localeCompare(b[0]))
);

// 숫자 키 정렬
const sortedNumMap = new Map(
    [...map].sort((a, b) => a[0] - b[0])
);

// 한글 정렬
const sortedKoreanMap = new Map(
    [...map].sort((a, b) => a[0].localeCompare(b[0], 'ko'))
);

값 기준 정렬

const sortedByValue = new Map(
    [...map].sort((a, b) => a[1] - b[1])
);

6. 실전 활용 예제

빈도수 계산

function countFrequency(arr) {
    const frequency = new Map();

    for (const item of arr) {
        frequency.set(item, (frequency.get(item) || 0) + 1);
    }

    return frequency;
}

학생 성적 관리

const studentGrades = new Map();

// 성적 입력
studentGrades.set('영희', {
    수학: 90,
    영어: 85,
    국어: 95
});

// 성적 확인
const yeongHeeGrades = studentGrades.get('영희');

투표 집계

const votes = new Map();

function countVote(candidate) {
    const currentVotes = votes.get(candidate) || 0;
    votes.set(candidate, currentVotes + 1);
}

두 수의 합 찾기

function findTwoSum(nums, target) {
    const map = new Map();

    for (let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];

        if (map.has(complement)) {
            return [map.get(complement), i];
        }

        map.set(nums[i], i);
    }

    return [];
}

7. 쉬운 비유로 이해하기

Map을 사물함에 비유하면:

1. 새 Map 만들기 = 빈 사물함 설치하기
2. set() = 사물함에 물건 넣기
3. get() = 사물함에서 물건 꺼내기
4. has() = 사물함에 물건이 있는지 확인하기
5. delete() = 사물함에서 물건 빼기
6. clear() = 모든 사물함 비우기

실생활 예제:

// 간식 가게 메뉴판
const menuBoard = new Map([
    ['라면', 3500],
    ['김밥', 2500],
    ['떡볶이', 3000]
]);

// 출석부
const attendance = new Map([
    ['민수', '출석'],
    ['영희', '지각'],
    ['철수', '결석']
]);

8. Map의 특징 및 장점

키의 타입 제한이 없음

• 객체도 키로 사용 가능
• NaN도 키로 사용 가능

순서 보장

• 삽입한 순서대로 데이터 유지

빠른 검색과 수정

• 키를 통한 빠른 접근 가능
• 데이터 추가/삭제가 효율적

이터러블(iterable) 객체

• for...of 루프 사용 가능
• 스프레드 연산자 사용 가능

9. 주의사항

메모리 사용

• 일반 객체보다 더 많은 메모리 사용

JSON 변환

• 직접적인 JSON 변환 불가능
• 변환을 위해서는 별도의 처리 필요

키의 중복 불가

• 같은 키에 새 값을 넣으면 이전 값 덮어씀

참조형 데이터

• 깊은 복사 시 주의 필요

이렇게 Map은 데이터를 체계적으로 관리하고 빠르게 접근해야 할 때 매우 유용한 도구입니다. 특히 키-값 쌍의 데이터를 다룰 때 강력한 기능을 제공합니다.