Frontend/JavaScript

[Map/Object] 자바스크립트의 Map과 Object

ayeongjin 2025. 5. 4. 00:27

📚 자바스크립트의 Map과 Object

알고리즘 문제를 풀이하다 Map과 Object의 차이에 대해 궁금해져서 둘을 비교하고, 언제 어떤 걸 써야 할지 정리해봤다.


 

✅ 1. 키(Key)의 타입

 

구분ObjectMap
허용되는 키 타입문자열(String), 심볼(Symbol)모든 값 (숫자, 객체, 함수 등 포함)

 

const map = new Map();
map.set(1, "number");
map.set("1", "string");
console.log(map.get(1));   // "number"
console.log(map.get("1")); // "string"

const obj = {};
obj[1] = "number";
obj["1"] = "string";
console.log(obj[1]);       // "string"

 
Object는 숫자 키를 문자열로 자동 변환하고 Map은 구분해서 저장한다.
 


 

✅ 2. 키의 순서 보장

 

구분ObjectMap
키의 순서 보장일부 순서를 보장하지만, 명확하지 않음삽입 순서 유지

 

const map = new Map();
map.set("b", 1);
map.set("a", 2);

console.log([...map.keys()]); // ["b", "a"]

const obj = { b: 1, a: 2 };
console.log(Object.keys(obj)); // ["b", "a"] 또는 ["a", "b"] (환경에 따라 다를 수 있음)

 
 


 

✅ 3. 크기 확인 방법

 

구분ObjectMap
크기 확인Object.keys(obj).length 처럼 따로 계산.size() 속성 제공

 

const map = new Map();
map.set("a", 1);
console.log(map.size); // 1

const obj = { a: 1 };
console.log(Object.keys(obj).length); // 1

 


 

✅ 4. 반복 및 순회

 

구분ObjectMap
반복 방식for...in, Object.entries() 등for...of, .entries(), .forEach() 등

 

const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(key, value);
}

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]);
}

 
 


 

✅ 5. 성능

 

구분ObjectMap
성능소규모 데이터나 정적인 속성 접근에
더 단순하고 가볍다
키가 많고, 삽입/삭제가 자주 일어나는 경우
더 안정적이고 빠르다

 
 


 

✅ 6. 기타 차이점

 

구분ObjectMap
프로토타입 상속Object.prototype 포함 (충돌 위험 있음)없음 (깨끗한 저장소)
직렬화(JSON)JSON.stringify() 지원직접 변환 필요 (Object.fromEntries(map) 활용)

 


 

🔍 언제 어떤 걸 써야 할까?

 

상황추천
JSON으로 저장/전송해야 한다면Object
다양한 타입의 키를 써야 한다면Map
삽입 순서가 중요하다면Map
단순 속성 저장 (config 등)Object
많은 삽입/삭제/조회가 필요하다면Map

 


 

✅ 정리

  • Object는 자바스크립트의 오래된 친구이고, Map은 보다 유연하고 구조적인 방식이다.
  • 특히 실시간 데이터 처리나 다양한 키를 다루는 경우, Map이 더 직관적이고 안정적이다.
  • 각각의 특성을 알고 목적에 맞게 선택한다면, 코드의 안정성과 성능 모두 챙길 수 있다.