📖TIL - "와.. 이렇게 쓸 수도 있구나!" Map, Set, reduce 실전 활용기 🤯

📌 오늘의 도전 과제

사용자의 행동을 기록하고 추적하는 시스템을 만들어야 했습니다.
(login, viewPage, logout 같은 행동들을 중복 없이 기록하기!)

처음에는 막막했지만... Map과 Set을 활용하니 생각보다 깔끔하게 해결됐어요!

💡 문제 해결 과정

1. 사용자 로깅 시스템 만들기

function createUserLogger() {
  const userLogs = new Map();  // 여러 사용자의 기록을 관리할 Map 생성!

  function recordUserAction(userId, action) {
    if(!userLogs.has(userId)) {
      userLogs.set(userId, new Set());  // Set으로 중복 기록 방지
    }
    const actions = userLogs.get(userId);
    actions.add(action);
  }

  function getUserActions(userId) {
    const actions = userLogs.get(userId);
    return actions ? [...actions] : [];
  }

  return { recordUserAction, getUserActions };
}

2. reduce의 신기한 활용법 발견!

// 요소 등장 횟수 세기
arr.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;  // 이 부분이 정말 신기했어요!
  return acc;
}, {});

🔍 코드 돌아보기

reduce로 배열 → 객체 만들기

오늘의 가장 큰 깨달음이었던 부분! 😲

acc[cur] = (acc[cur] || 0) + 1

이게 어떻게 동작하는지 이해했을 때의 그 희열이란...!

1. 처음 'banana' 등장

   • acc['banana']가 없으니까 undefined
   • undefined || 0 → 0이 되고
   • 여기에 + 1 해서 1이 저장!

2. 'melon' 두 번째 등장할 때는

   • acc['melon']이 이미 1
   • 1 || 0 → 1
   • 여기에 + 1 해서 2가 됨

와... 정말 짧은 코드였지만 이렇게나 멋진 동작을 한다니... 🥹

✨ 오늘의 깨달음

1. Map과 Set이 이럴 때 진가를 발휘하는구나

   • 중복 제거가 필요할 때 Set이 최고!
   • 여러 데이터를 키-값으로 관리할 때는 Map이 딱!

2. reduce는 생각보다 훨씬 강력하다

   • undefined를 이용한 초기값 설정이라니...
   • 이런 게 진정한 JavaScript의 묘미인 것 같아요

🚀 특히 마음에 든 점

• 코드가 짧으면서도 강력해요
• undefined를 이용해서 초기값을 설정하는 아이디어가 정말 똑똑한 것 같아요
• 실무에서 바로 적용할 수 있을 것 같아 더 기쁩니다!

⭐️ 참고 자료

• MDN Map & Set 문서 (진작 자세히 볼걸 그랬네요...)

오늘도 하나 배워갑니다. 값이 없는 점을 이용하여 0으로 할당할 수 있다는 것!
JavaScript는 배울수록 더 재미있어지는 것 같아요 ✨