Map과 Set의 핵심 활용 패턴

현대 자바스크립트에서 데이터 처리를 효율화하는 두 가지 주요 컬렉션 타입인 Map과 Set에 대해 심층적인 이해를 제공합니다.

Map 객체 생성 및 기본 동작

// 초기화 방법
const keyValueStore = new Map();
console.log(keyValueStore.size); // 0

// 배열로 초기화
const userDataMap = new Map([
  ['fullName', 'Jane'],
  ['age', 28],
  ['isMember', true]
]);
console.log(userDataMap.size); // 3

// 데이터 조작
userDataMap.set('age', 29);
userDataMap.set('email', 'jane@example.com');
console.log(userDataMap.get('fullName')); // Jane

반복 및 변환 전략

// 반복 방식
userDataMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 배열로 변환
const dataArray = [...userDataMap];
console.log(dataArray); 
// [["fullName", "Jane"], ["age", 29], ...]

ES2024 기능 활용

const productVotes = [
  { id: 101, category: 'electronics' },
  { id: 102, category: 'clothing' },
  { id: 103, category: 'electronics' }
];

// 카테고리별 그룹화
const groupedProducts = Map.groupBy(productVotes, item => item.category);
console.log(groupedProducts.get('electronics'));
// [ { id: 101, category: 'electronics' }, { id: 103, ... } ]

Set의 고유성 관리

// 생성 및 조작
const uniqueColors = new Set(['red', 'blue', 'green', 'red']);
console.log(uniqueColors.size); // 3

uniqueColors.add('yellow');
console.log(uniqueColors.has('blue')); // true

집합 연산 최적화

const setA = new Set([10, 20, 30]);
const setB = new Set([20, 30, 40]);

// 집합 연산
const union = setA.union(setB);
const intersection = setA.intersection(setB);
const difference = setA.difference(setB);

console.log([...union]); // [10,20,30,40]
console.log([...intersection]); // [20,30]

약한 참조 타입 활용

// WeakMap 예시
const weakRefMap = new WeakMap();
let tempObj = { id: 1 };

weakRefMap.set(tempObj, 'temporary data');
console.log(weakRefMap.get(tempObj)); // temporary data

tempObj = null; // 자동 회수

// WeakSet 예시
const weakRefSet = new WeakSet();
const domElement = document.getElementById('target');

weakRefSet.add(domElement);
console.log(weakRefSet.has(domElement)); // true

domElement = null; // 자동 회수

실무 적용 사례

캐싱 최적화

const resultCache = new Map();

function fetchProcessedData(key) {
  if (resultCache.has(key)) {
    return resultCache.get(key);
  }
  
  // 복잡한 계산 로직
  const processed = processKey(key);
  resultCache.set(key, processed);
  return processed;
}

중복 제거 구현

function extractUniqueElements(array) {
  return [...new Set(array)];
}

const duplicateList = [1, 1, 2, 2, 3];
console.log(extractUniqueElements(duplicateList)); // [1,2,3]