자바스크립트 Map과 Set: 고성능 자료구조 활용하기 🚀

안녕, 친구들! 오늘은 자바스크립트의 꿀잼 자료구조인 Map과 Set에 대해 알아볼 거야. 이 둘은 마치 슈퍼히어로처럼 우리의 코드를 더 빠르고 강력하게 만들어주는 존재들이지. 😎 자, 그럼 이 흥미진진한 여정을 함께 떠나볼까?

🎯 목표: 이 글을 다 읽고 나면, 너희는 Map과 Set을 마치 요리사가 칼을 다루듯 능숙하게 다룰 수 있게 될 거야. 그리고 이 스킬로 너희의 코딩 실력은 하늘을 찌를 거라고!

1. Map: 키-값의 완벽한 짝꿍 💑

Map은 키-값 쌍을 저장하는 자료구조야. 객체(Object)와 비슷하지만, 훨씬 더 강력하고 유연해. 마치 슈퍼맨과 클락 켄트의 관계처럼, 겉보기엔 평범해 보이지만 실제로는 엄청난 능력을 숨기고 있지.

1.1 Map의 특징

키의 다양성: 객체와 달리, Map은 함수, 객체, 원시 타입 등 모든 값을 키로 사용할 수 있어.
순서 보장: Map은 항상 삽입된 순서를 기억해. 마치 완벽한 기억력을 가진 비서 같아!
성능: 많은 데이터를 다룰 때 객체보다 더 빠른 성능을 보여줘.
크기 확인 용이: size 속성으로 쉽게 Map의 크기를 알 수 있어.

1.2 Map 사용하기

자, 이제 Map을 어떻게 사용하는지 살펴볼까? 코드로 보는 게 제일 쉬우니까, 예제를 통해 알아보자!


// Map 생성
const superheroes = new Map();

// 데이터 추가
superheroes.set('DC', '슈퍼맨');
superheroes.set('Marvel', '아이언맨');
superheroes.set('독립 영웅', '원펀맨');

// 데이터 가져오기
console.log(superheroes.get('DC')); // 출력: 슈퍼맨

// 크기 확인
console.log(superheroes.size); // 출력: 3

// 키 존재 여부 확인
console.log(superheroes.has('Marvel')); // 출력: true

// 데이터 삭제
superheroes.delete('독립 영웅');

// 모든 데이터 삭제
superheroes.clear();

와우! 이렇게 간단하게 Map을 사용할 수 있어. 마치 슈퍼히어로들이 능력을 사용하는 것처럼 쉽고 강력하지? 😄

1.3 Map의 활용 사례

Map은 정말 다양한 상황에서 유용하게 쓰일 수 있어. 예를 들어볼게:

캐시 구현: 웹 애플리케이션에서 자주 사용되는 데이터를 저장할 때
상태 관리: 복잡한 상태를 가진 애플리케이션에서 상태를 관리할 때
그래프 구현: 노드 간의 관계를 표현할 때
중복 제거: 유니크한 키-값 쌍을 유지해야 할 때

재능넷 같은 플랫폼에서도 Map을 활용할 수 있어. 예를 들어, 사용자의 재능과 그에 대한 평가를 저장하는 데 Map을 사용할 수 있지. 각 사용자를 키로, 그들의 재능과 평가를 값으로 저장하면 효율적인 데이터 관리가 가능해져.

💡 팁: Map을 사용할 때는 항상 키의 유일성을 고려해야 해. 같은 키로 여러 번 set()을 호출하면, 마지막 값만 저장된다는 걸 잊지 마!

1.4 Map vs 객체

Map과 객체는 비슷해 보이지만, 중요한 차이점들이 있어. 이 둘을 비교해보자!

이 비교를 보면 Map이 얼마나 강력한지 알 수 있지? 하지만 모든 상황에서 Map이 좋은 건 아니야. 단순한 데이터 구조라면 여전히 객체가 더 적합할 수 있어. 상황에 맞게 선택하는 게 중요해!

1.5 Map의 고급 기능

Map은 기본적인 기능 외에도 몇 가지 멋진 기능들을 가지고 있어. 이걸 알면 너의 코딩 실력이 한층 더 업그레이드 될 거야!

1.5.1 이터레이션

Map은 기본적으로 이터러블이야. 즉, for...of 루프나 스프레드 연산자를 사용할 수 있지.


const fruitMap = new Map([
  ['사과', '빨강'],
  ['바나나', '노랑'],
  ['키위', '초록']
]);

for (let [fruit, color] of fruitMap) {
  console.log(`${fruit}은(는) ${color}색이에요!`);
}

// 출력:
// 사과은(는) 빨강색이에요!
// 바나나은(는) 노랑색이에요!
// 키위은(는) 초록색이에요!

1.5.2 Map 메서드

Map은 여러 유용한 메서드를 제공해. 이 메서드들을 사용하면 데이터를 더 효율적으로 다룰 수 있어.

keys(): 모든 키를 반환
values(): 모든 값을 반환
entries(): 모든 키-값 쌍을 반환


const techStack = new Map([
  ['프론트엔드', 'React'],
  ['백엔드', 'Node.js'],
  ['데이터베이스', 'MongoDB']
]);

console.log([...techStack.keys()]); // ['프론트엔드', '백엔드', '데이터베이스']
console.log([...techStack.values()]); // ['React', 'Node.js', 'MongoDB']
console.log([...techStack.entries()]); 
// [['프론트엔드', 'React'], ['백엔드', 'Node.js'], ['데이터베이스', 'MongoDB']]

1.5.3 WeakMap

WeakMap은 Map의 특별한 버전이야. 키로 오직 객체만 사용할 수 있고, 키로 사용된 객체에 대한 참조가 약하게(weakly) 유지돼. 이게 무슨 말이냐고? 간단히 말해서, 키로 사용된 객체가 가비지 컬렉션의 대상이 될 수 있다는 거야.


let obj = { name: "WeakMap 예제" };
const wm = new WeakMap();
wm.set(obj, "비밀 데이터");

console.log(wm.get(obj)); // "비밀 데이터"

obj = null; // obj에 대한 참조 제거

// 이제 wm에서 obj에 대한 엔트리는 언제든 가비지 컬렉션될 수 있어

WeakMap은 메모리 누수를 방지하고 싶을 때 유용해. 예를 들어, DOM 요소에 관련된 데이터를 저장할 때 WeakMap을 사용하면 좋아. DOM 요소가 삭제되면 관련 데이터도 자동으로 가비지 컬렉션되니까!

🔍 심화 학습: Map과 WeakMap의 차이점을 더 자세히 알고 싶다면, MDN 문서를 참고해봐. 거기에 더 깊이 있는 설명이 있어!

2. Set: 유일한 값들의 모임 🎭

이제 Set에 대해 알아볼 차례야. Set은 중복을 허용하지 않는 값들의 집합이야. 마치 엄격한 클럽 같아서, 똑같은 멤버는 절대 두 번 입장할 수 없지! 😄

2.1 Set의 특징

유일성: Set 내의 모든 값은 유일해. 중복된 값은 자동으로 무시돼.
다양한 타입: 숫자, 문자열, 객체 등 어떤 타입의 값이든 저장할 수 있어.
순서: 삽입 순서대로 요소를 순회할 수 있어.
빠른 검색: 값의 존재 여부를 빠르게 확인할 수 있어.

2.2 Set 사용하기

Set을 사용하는 방법은 정말 간단해. 한번 예제를 통해 살펴볼까?


// Set 생성
const uniqueColors = new Set();

// 값 추가
uniqueColors.add('빨강');
uniqueColors.add('파랑');
uniqueColors.add('초록');
uniqueColors.add('빨강'); // 중복된 값은 무시됨

console.log(uniqueColors.size); // 출력: 3

// 값 존재 여부 확인
console.log(uniqueColors.has('노랑')); // 출력: false

// 값 삭제
uniqueColors.delete('초록');

// 모든 값 삭제
uniqueColors.clear();

보이지? Set을 사용하면 중복 없는 유니크한 값들의 집합을 쉽게 만들 수 있어. 이런 특성 때문에 Set은 데이터의 중복을 제거하는 데 아주 유용하지.

2.3 Set의 활용 사례

Set은 여러 상황에서 유용하게 사용될 수 있어. 몇 가지 예를 들어볼게:

중복 제거: 배열에서 중복된 요소를 제거할 때
유니크한 값 관리: 사용자 ID나 이메일 주소 같은 고유한 값을 관리할 때
교집합, 합집합, 차집합 구현: 수학적 집합 연산을 구현할 때
방문 기록 관리: 웹사이트에서 사용자가 방문한 페이지를 추적할 때

재능넷에서도 Set을 활용할 수 있어. 예를 들어, 사용자가 관심 있는 재능 카테고리를 중복 없이 저장하거나, 특정 재능을 가진 유니크한 사용자 목록을 관리하는 데 Set을 사용할 수 있지.

💡 팁: Set은 값의 유일성을 보장하지만, 객체나 배열을 저장할 때는 주의가 필요해. 객체나 배열은 참조로 비교되기 때문에, 내용이 같아도 다른 참조라면 중복으로 저장될 수 있어.

2.4 Set vs 배열

Set과 배열은 비슷해 보이지만, 중요한 차이점이 있어. 이 둘을 비교해보자!

이 비교를 보면 Set과 배열이 각각 어떤 상황에서 유용한지 알 수 있지? Set은 유니크한 값들의 집합을 다룰 때 특히 유용해. 반면에 배열은 순서가 중요하거나 중복된 요소가 필요할 때 사용하면 좋아.

2.5 Set의 고급 기능

Set도 Map처럼 몇 가지 멋진 고급 기능을 가지고 있어. 이걸 알면 Set을 더욱 효과적으로 사용할 수 있을 거야!

2.5.1 이터레이션

Set도 이터러블이야. for...of 루프나 스프레드 연산자를 사용할 수 있지.


const fruits = new Set(['사과', '바나나', '오렌지']);

for (let fruit of fruits) {
  console.log(fruit);
}

// 출력:
// 사과
// 바나나
// 오렌지

console.log([...fruits]); // ['사과', '바나나', '오렌지']

2.5.2 Set 메서드

Set은 여러 유용한 메서드를 제공해. 이 메서드들을 사용하면 Set을 더 효율적으로 다룰 수 있어.

add(value): 새로운 요소 추가
delete(value): 요소 삭제
has(value): 요소 존재 여부 확인
clear(): 모든 요소 삭제


const programmingLanguages = new Set();

programmingLanguages.add('JavaScript');
programmingLanguages.add('Python');
programmingLanguages.add('Java');

console.log(programmingLanguages.has('JavaScript')); // true
console.log(programmingLanguages.size); // 3

programmingLanguages.delete('Java');
console.log(programmingLanguages.size); // 2

programmingLanguages.clear();
console.log(programmingLanguages.size); // 0

2.5.3 WeakSet

WeakSet은 Set의 특별한 버전이야. WeakSet은 오직 객체만을 저장할 수 있고, 저장된 객체에 대한 참조가 약하게(weakly) 유지돼. 이는 WeakMap과 비슷한 개념이야.


let obj1 = { name: "WeakSet 예제 1" };
let obj2 = { name: "WeakSet 예제 2" };

const ws = new WeakSet();
ws.add(obj1);
ws.add(obj2);

console.log(ws.has(obj1)); // true

obj1 = null; // obj1에 대한 참조 제거

// 이제 ws에서 obj1은 언제든 가비지 컬렉션될 수 있어

WeakSet은 객체의 존재 여부를 추적하면서도 메모리 누수를 방지하고 싶을 때 유용해. 예를 들어, DOM 요소 집합을 관리하면서 페이지에서 요소가 제거될 때 자동으로 집합에서도 제거되게 하고 싶을 때 WeakSet을 사용할 수 있어.

🌟 실전 팁: Set과 WeakSet을 사용할 때는 항상 성능과 메모리 사용을 고려해야 해. 큰 데이터셋을 다룰 때는 WeakSet이 메모리 관리에 도움이 될 수 있지만, 일반적인 경우에는 Set으로도 충분할 거야.

3. Map과 Set의 실전 활용 🚀

자, 이제 Map과 Set의 기본을 알았으니 실전에서 어떻게 활용할 수 있는지 더 자세히 알아보자! 실제 프로젝트에서 이 자료구조들을 어떻게 사용할 수 있는지, 그리고 어떤 장점이 있는지 살펴볼 거야.

3.1 Map의 실전 활용

3.1.1 캐시 구현하기

Map은 캐시를 구현하는 데 아주 유용해. 예를 들어, 웹 애플리케이션에서 API 호출 결과를 캐시하고 싶다고 해보자.


const cache = new Map();

async function fetchData(url) {
  if (cache.has(url)) {
    console.log('캐시에서 데이터 가져옴');
    return cache.get(url);
  }

  console.log('API에서 데이터 가져옴');
  const response = await fetch(url);
  const data = await response.json();
  cache.set(url, data);
  return data;
}

// 사용 예
fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .then(() => fetchData('https://api.example.com/data')) // 두 번째 호출은 캐시에서 가져옴
  .then(data => console.log(data));

이렇게 하면 같은 URL로 여러 번 요청을 보내도 실제로는 한 번만 API를 호출하고, 그 이후에는 캐시된 데이터를 사용하게 돼. 성능이 크게 향상되겠지?

3.1.2 상태 관리

복잡한 애플리케이션에서 상태를 관리할 때도 Map이 유용해. 예를 들어, 여러 사용자의 온라인/오프라인 상태를 관리한다고 해보자.


const userStatus = new Map();

function updateUserStatus(userId, status) {
  userStatus.set(userId, status);
  console.log(`사용자 ${userId}의 상태가 ${status}로 업데이트됨`);
}

function getUserStatus(userId) {
  return userStatus.get(userId) || '알 수 없음';
}

// 사용 예
updateUserStatus('user1', '온라인');
updateUserStatus('user2', '오프라인');
console.log(getUserStatus('user1')); // 온라인
console.log(getUserStatus('user3')); // 알 수 없음

이런 식으로 Map을 사용하면 사용자 ID를 키로, 상태를 값으로 저장해서 효율적으로 관리할 수 있어.

3.1.3 다국어 지원

Map을 사용하면 다국어 지원 기능을 쉽게 구현할 수 있어. 각 언어에 대한 번역을 Map에 저장하고, 필요할 때 꺼내 쓰는 거지.


const translations = new Map();

translations.set('en', new Map([
  ['hello', 'Hello'],
  ['goodbye', 'Goodbye'],
  ['welcome', 'Welcome']
]));

translations.set('ko', new Map([
  ['hello', '안녕하세요'],
  ['goodbye', '안녕히 가세요'],
  ['welcome', '환영합니다']
]));

function translate(lang, key) {
  if (translations.has(lang) && translations.get(lang).has(key)) {
    return translations.get(lang).get(key);
  }
  return key; // 번역이 없으면 원래 키를 반환
}

console.log(translate('en', 'hello')); // Hello
console.log(translate('ko', 'welcome')); // 환영합니다
console.log(translate('fr', 'goodbye')); // goodbye (번역 없음)

이렇게 하면 새로운 언어나 번역을 추가하기도 쉽고, 필요한 번역을 빠르게 찾을 수 있어.

3.2 Set의 실전 활용

3.2.1 중복 제거

Set의 가장 일반적인 사용 사례는 배열에서 중복을 제거하는 거야. 아주 간단하게 할 수 있지!


const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

이 방법은 배열의 순서도 유지하면서 중복을 제거할 수 있어서 아주 유용해.

3.2.2 태그 시스템 구현

블로그나 게시판 같은 곳에서 태그 시스템을 구현할 때 Set을 사용하면 좋아. 중복된 태그를 자동으로 제거할 수 있거든.


class Post {
  constructor(title, content) {
    this.title = title;
    this.content = content;
    this.tags = new Set();
  }

  addTag(tag) {
    this.tags.add(tag.toLowerCase());
  }

  removeTag(tag) {
    this.tags.delete(tag.toLowerCase());
  }

  getTags() {
    return [...this.tags];
  }
}

const post = new Post('JavaScript 팁', '여기 JavaScript 팁이 있습니다...');
post.addTag('JavaScript');
post.addTag('Programming');
post.addTag('javascript'); // 중복 태그, 무시됨

console.log(post.getTags()); // ['javascript', 'programming']

이렇게 하면 태그를 추가할 때마다 자동으로 중복이 제거되고, 대소문자 구분 없이 유니크한 태그 목록을 유지할 수 있어.

3.2.3 방문 기록 관리

웹사이트에서 사용자가 방문한 페이지를 추적할 때도 Set을 사용할 수 있어. 각 페이지를 한 번만 기록하고 싶을 때 유용하지.


class BrowsingHistory {
  constructor() {
    this.history = new Set();
  }

  addPage(url) {
    this.history.add(url);
  }

  hasVisited(url) {
    return this.history.has(url);
  }

  getUniquePageCount() {
    return this.history.size;
  }
}

const userHistory = new BrowsingHistory();

userHistory.addPage('/home');
userHistory.addPage('/about');
userHistory.addPage('/home'); // 중복 방문, 한 번만 기록됨

console.log(userHistory.hasVisited('/home')); // true
console.log(userHistory.hasVisited('/contact')); // false
console.log(userHistory.getUniquePageCount()); // 2

이런 방식으로 사용자의 유니크한 방문 기록을 쉽게 관리할 수 있어. 중복 방문은 자동으로 무시되고, 실제로 방문한 유니크한 페이지 수를 쉽게 알 수 있지.

4. 성능 고려사항 🚀

Map과 Set을 사용할 때는 성능도 중요한 고려사항이야. 언제 이 자료구조들을 사용하는 게 좋고, 어떤 상황에서 주의해야 하는지 알아보자.

4.1 Map vs 객체

일반적으로 Map은 많은 수의 키-값 쌍을 자주 추가하거나 삭제할 때 객체보다 더 나은 성능을 보여줘. 특히 키가 문자열이 아닌 경우에 Map이 훨씬 유리해.


const map = new Map();
const obj = {};

console.time('Map');
for (let i = 0; i < 1000000; i++) {
  map.set(i, i);
}
for (let i = 0; i < 1000000; i++) {
  map.get(i);
}
console.timeEnd('Map');

console.time('Object');
for (let i = 0; i < 1000000; i++) {
  obj[i] = i;
}
for (let i = 0; i < 1000000; i++) {
  obj[i];
}
console.timeEnd('Object');

이런 벤치마크를 실행해보면, 대부분의 경우 Map이 더 빠른 걸 확인할 수 있을 거야.

4.2 Set vs 배열

Set은 고유한 값을 저장하고 검색하는 데 있어서 배열보다 훨씬 빠른 성능을 보여줘. 특히 큰 데이터셋에서 값의 존재 여부를 확인할 때 Set이 월등히 뛰어나.


const set = new Set();
const arr = [];

for (let i = 0; i < 1000000; i++) {
  set.add(i);
  arr.push(i);
}

console.time('Set');
set.has(999999);
console.timeEnd('Set');

console.time('Array');
arr.includes(999999);
console.timeEnd('Array');

이 벤치마크를 실행해보면, Set이 배열보다 훨씬 빠르게 값을 찾는 걸 확인할 수 있을 거야.