Frontend/JavaScript
[Map/Object] 자바스크립트의 Map과 Object
ayeongjin
2025. 5. 4. 00:27
📚 자바스크립트의 Map과 Object
알고리즘 문제를 풀이하다 Map과 Object의 차이에 대해 궁금해져서 둘을 비교하고, 언제 어떤 걸 써야 할지 정리해봤다.
✅ 1. 키(Key)의 타입
구분 | Object | Map |
허용되는 키 타입 | 문자열(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. 키의 순서 보장
구분 | Object | Map |
키의 순서 보장 | 일부 순서를 보장하지만, 명확하지 않음 | 삽입 순서 유지 |
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. 크기 확인 방법
구분 | Object | Map |
크기 확인 | 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. 반복 및 순회
구분 | Object | Map |
반복 방식 | 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. 성능
구분 | Object | Map |
성능 | 소규모 데이터나 정적인 속성 접근에 더 단순하고 가볍다 | 키가 많고, 삽입/삭제가 자주 일어나는 경우 더 안정적이고 빠르다 |
✅ 6. 기타 차이점
구분 | Object | Map |
프로토타입 상속 | Object.prototype 포함 (충돌 위험 있음) | 없음 (깨끗한 저장소) |
직렬화(JSON) | JSON.stringify() 지원 | 직접 변환 필요 (Object.fromEntries(map) 활용) |
🔍 언제 어떤 걸 써야 할까?
상황 | 추천 |
JSON으로 저장/전송해야 한다면 | Object |
다양한 타입의 키를 써야 한다면 | Map |
삽입 순서가 중요하다면 | Map |
단순 속성 저장 (config 등) | Object |
많은 삽입/삭제/조회가 필요하다면 | Map |
✅ 정리
- Object는 자바스크립트의 오래된 친구이고, Map은 보다 유연하고 구조적인 방식이다.
- 특히 실시간 데이터 처리나 다양한 키를 다루는 경우, Map이 더 직관적이고 안정적이다.
- 각각의 특성을 알고 목적에 맞게 선택한다면, 코드의 안정성과 성능 모두 챙길 수 있다.