[JS] Map, Object, JSON 비교하기
db.size는 되는데 req.body.size는 안 되는 이유
개발하다 보면 이런 상황을 한 번쯤 경험했을 것이다.
“내 Map 객체 db는 db.size로 크기를 확인할 수 있는데, 클라이언트에서 받은 req.body는 size를 확인하려 하니 undefined가 발생한다!”
이번 글에서는 왜 이런 문제가 발생하는지와 Map, Object, JSON의 차이를 함께 정리해보겠다.
1. 문제 상황
// Map 객체
const db = new Map();
db.set("홍길동", { age: 20 });
console.log(db.size); // 1 ✔
app.post('/user', (req, res) => {
const userInfo = req.body;
console.log(userInfo.size); // undefined ❌
});
- db는 Map이므로 .size로 요소 개수를 바로 확인할 수 있다.
- req.body는 JSON이 Object로 파싱되므로 .size가 없고, 따라서 undefined가 발생한다.
2. 원인 분석
2-1. db는 Map
Map은 컬렉션 자료구조(Collection Data Structure)이다.
- 키: 모든 자료형 사용 가능 (문자열, 객체, 함수 등)
- 크기 확인:
.size속성으로 가능 - CRUD 메서드 제공:
set,get,has,delete
const map = new Map();
map.set("key", "value");
console.log(map.size); // 1
2-2. req.body는 Object
클라이언트가 보낸 JSON은 Express에서 자동으로 JS Object로 변환된다.
- 키: 문자열 또는 심볼만 가능
- 크기 확인:
Object.keys(obj).length사용 - 내장
.size가 없으므로 undefined 발생
const obj = { name: "홍길동", age: 20 };
console.log(Object.keys(obj).length); // 2 ✔
console.log(obj.size); // undefined ❌
3. Map과 Object의 차이
| 항목 | Map | Object |
|---|---|---|
| 키 | 모든 타입 가능 | 문자열/심볼 |
| 크기 확인 | .size |
Object.keys(obj).length |
| CRUD | 풍부한 메서드 | 제한적 (delete, in 등) |
| 순회 | 삽입 순서 100% 보장 | 순서 일부 제한 |
| 용도 | 데이터 컬렉션, 캐시, 키-값 저장소 | 엔티티 표현, JSON 직렬화 가능 |
4. 컬렉션 자료구조란?
컬렉션 자료구조(Collection Data Structure)란 데이터를 여러 개 묶어서 관리하는 구조를 의미한다.
JavaScript에서 대표적인 컬렉션:
- Map
- Set
- WeakMap
- WeakSet
Object와 비교하면 다음과 같다:
- Object: 단일 엔티티(Entity) 표현
- Map/Set: 데이터 집합 관리, 삽입/삭제/검색 효율적
5. JSON vs Object
- JSON: 문자열 포맷, 데이터 교환용
- Object: 실제 JS 데이터 구조, 메모리 상 객체
5-1. JSON 직렬화
JS 객체를 JSON 문자열로 바꾸는 과정을 JSON 직렬화라고 한다. 주로 파일을 저장하거나 HTTP로 전송할 때 사용
5-2. JSON 역직렬화
JSON 문자열을 다시 JS 객체로 바꾸는 과정을 JSON 역직렬화라고 한다.
// JSON 문자열
const json = '{ "name": "홍길동", "age": 20 }';
// Object로 변환 (역직렬화)
const obj = JSON.parse(json);
console.log(obj.name); // "홍길동"
// Object → JSON (직렬화)
const str = JSON.stringify(obj);
console.log(str); // '{"name":"홍길동","age":20}'
비유하자면, JSON은 택배 박스이고 Object는 실제 물건과 같다.
6. JSONObject란?
JavaScript에는 공식적으로 JSONObject라는 타입은 존재하지 않는다.
- 흔히 “JSON처럼 생긴 JS 객체”를 의미
- Java 등 다른 언어에서는 실제
JSONObject클래스 존재 - JS에서는 JSON을 파싱한 Object라고 이해하면 된다
7. JSON Object vs JSON Array
- JSON Object:
{}시작 → JS Object - JSON Array:
[]시작 → JS Array
// JSON Object
const jsonObj = '{ "name": "홍길동", "age": 20 }';
const obj = JSON.parse(jsonObj);
// JSON Array
const jsonArr = '[{ "name": "홍길동" }, { "name": "임꺽정" }]';
const arr = JSON.parse(jsonArr);
8. 실무 예시: Express req.body
app.post('/user', (req, res) => {
const userInfo = req.body; // 자동으로 Object/Array 변환
console.log(Object.keys(userInfo).length); // Object이면 크기 확인 가능
});
따라서 userInfo.size는 undefined이고, Object의 크기는 Object.keys(userInfo).length로 확인해야 한다.
9. Map vs Object 선택 기준
| 구분 | Map | Object |
|---|---|---|
| 키 | 모든 타입 가능 | 문자열/심볼 |
| 크기 확인 | .size |
Object.keys(obj).length |
| CRUD 편의성 | 풍부한 메서드 | 제한적 |
| 순회 | 삽입 순서 100% 보장 | 순서 일부 제한 |
| 용도 | 컬렉션, 캐시, 데이터 묶음 | 엔티티, 설정값, JSON 직렬화 |
10. 결론
- Map: 컬렉션 자료구조, 키-값 관리에 최적화
- Object: 단일 엔티티 표현, JSON 직렬화에 유리
- JSON: 문자열 포맷, 데이터 교환용
- JSONObject: JS에서는 공식 용어 아님 → JSON 파싱 후 Object
- JSON Array vs Object: 시작 문자를 보면 구분 가능 (`[` vs `{`)
이번 글을 통해 “왜 db.size는 되고 req.body.size는 안 되는지”부터 시작해서 Map, Object, JSON까지 명확히 구분할 수 있을 것이다.