Map과 일반객체가 다른가요?

상황

자바스크립트 스터디 중 이런 질문을 받았다.

Q. Map 객체와 일반객체의 차이가 뭐예요?
A. Map은 메서드가 있어 데이터 조작을 할 수 있고... 어.. 모르겠습니다.

 

오늘 일을 반성하며 Map과 일반 객체의 차이에 대해 알아보려고 한다.

---

1. 일반 객체

자바스크립트에서 가장 기본적인 데이터 구조로, 속성(key)-값(value)쌍으로 이루어져 있다.

 

특징

• key로 문자열 또는 심볼만 사용할 수 있다. ( 숫자나 다른 타입은 자동으로 문자열로 변환된다.)
• new Object() 또는 객체 리터럴 방식( {} )으로 생성한다.
• JSON 형태로 쉽게 변환될 수 있으며, 서버와의 데이터 통신 시 주로 사용된다.

const user = {
    name: "Alice",
    age: 25,
    city: "New York"
};

 

2. Map

ES6에서 도입된 새로운 데이터 구조로, 객체와 유사하게 키-값 쌍을 저장하지만 더 유연하고 다양한 기능을 제공한다.

 

특징

• 키로 모든 데이터 타입을 사용할 수 있다. ( 문자열, 심볼, 숫자, 객체, 함수 등 )
• 삽입 순서를 유지한다. 즉, 반복문( for...of 또는 forEach )을 사용해 순차적으로 요소에 접근할 수 있다.
• 삽입/삭제 성능이 객체보다 더 효율적이다.
• size, set, get, has, delete 등 다양한 메서드를 제공한다.

const map = new Map();
map.set('key', 'value');
map.set(123, 'number key');
map.set({ id: 1 }, 'object key');

 

사용처

• 키로 객체나 함수 같은 복잡한 데이터를 사용할 때 유용하다.
• 대규모 데이터 관리에 적합하며, 특히 삽입, 삭제, 검색이 빈번한 경우에 유리하다.
• 데이터 순서가 중요한 경우 사용한다.

---

비교 정리

특성	일반 객체(Object)	Map
키 타입	문자열 또는 심볼	모든 데이터 타입 (숫자, 객체, 함수 등)
키 순서	보장되지 않음	삽입된 순서를 유지
프로토타입 체인	있음 (상속된 속성 포함 가능)	없음
반복 가능 여부	직접 반복 불가 ( for...in 사용 가능)	순차적 반복 가능 ( for...of, forEach )
메서드 지원	기본 메서드 ( hasOwnProperty, toString )	다양한 전용 메서드 ( set, get, has, delete )
사용처	적은 양의 데이터, 키가 문자열일 때	대규모 데이터, 키로 객체 등을 사용할 때

 

---

후일담

Map을 공부하면서, 처음엔 "이거 잘 안쓰지 않나?" 라는 생각을 했다. 프로젝트를 진행하면서 사용한 적이 없었다. 그래서 공부할 때 주의깊에 보지 않았다.🙃

 

질문이 들어왔을 때는 엄청 당황했다. 팀원 중 한분이 실제 면접에서 받았던 질문 중 하나라는 말에 더 당황했다.

팀원분은 node.js로 백엔드 작업을 하시는 분이었는데, DB에서 키-값 데이터를 처리할 때 Map을 많이 사용했다고 말씀하셨다.

 

이제 스터디 기간도 얼마 남지 않았지만, 힘내서 끝까지 잘 마무리해야겠다. 😹