TIL

🔍 일반 객체 ({}) vs Map

devyu0001 2025. 2. 14. 09:47

1️⃣ 일반 객체 ({}) 사용 예시

function getFrequency(arr) {
    let freq = {}; // 일반 객체 사용

    arr.forEach((a) => {
        if (!freq[a]) {
            freq[a] = 1;
        } else {
            freq[a] += 1;
        }
    });

    return freq;
}

const arr = ["apple", "banana", "apple", "orange", "banana", "apple"];
console.log(getFrequency(arr));

출력 결과:

{ apple: 3, banana: 2, orange: 1 }

📌 일반 객체는 더 직관적이고, 코드가 간결하며 Object.keys(), Object.values() 등을 쉽게 사용할 수 있어요.


2️⃣ Map 사용 예시

function getFrequency(arr) {
    let freq = new Map(); // Map 사용

    arr.forEach((a) => {
        freq.set(a, (freq.get(a) || 0) + 1);
    });

    return Object.fromEntries(freq); // 다시 일반 객체로 변환
}

console.log(getFrequency(["apple", "banana", "apple", "orange", "banana", "apple"]));

출력 결과 (동일):

{ apple: 3, banana: 2, orange: 1 }

📌 Map을 사용할 경우 get(a) || 0를 사용하면 초기값을 따로 설정할 필요가 없어서 조금 깔끔할 수 있어요.


🎯 언제 Map을 쓰는 게 좋을까?

일반 객체 ({})를 사용하는 경우:

  • 단순한 키-값 구조
  • JSON 변환이 필요할 때 (JSON.stringify() 사용 가능)
  • Object.keys(), Object.values() 등을 쉽게 활용하고 싶을 때

Map을 사용하는 경우:

  • 키가 반드시 문자열일 필요가 없을 때 (예: 숫자, 객체 등도 키로 가능)
  • 키의 개수가 많아 성능이 중요한 경우 (Map이 더 빠름)
  • has(), get(), set() 같은 메서드를 더 직관적으로 쓰고 싶을 때

'TIL' 카테고리의 다른 글

🤔 npm vs yarn 차이점  (0) 2025.02.26
ReactJS 심화 학습 정리  (0) 2025.02.20
코드로 소통하기 (깃허브 쓰는 방법)  (0) 2025.02.11
Hook  (0) 2025.01.31
React 입문 개인과제  (0) 2025.01.21