반응형
자바와 자바스크립트를 같이 쓰다 보면 Map + for문에서 자주 막힌다.
문법을 몰라서가 아니라, 데이터를 바라보는 관점이 정리되지 않았기 때문이다.
이 글에서는
- Map을 언제 쓰는지
- 자바와 JS에서 반복문을 어떻게 통일해서 생각하면 되는지
- 실무·면접에서 바로 써먹는 패턴
까지 한 번에 정리한다.
1️⃣ Map은 언제 쓰는 자료구조인가?
먼저 이 문장을 머리에 고정하자.
Map = 키로 바로 찾아야 하는 데이터 묶음
상황자료구조
| 순서가 중요함 | List / Array |
| key로 바로 조회 | Map / Object |
Map은 for문보다 먼저 결정되는 개념이다.
2️⃣ Java에서 Map + for문 기본 패턴 3가지
① key만 필요할 때
for (String key : map.keySet()) {
System.out.println(key);
}
② value만 필요할 때
for (User user : map.values()) {
System.out.println(user.getName());
}
③ key + value 둘 다 필요할 때 (가장 중요)
for (Map.Entry<String, User> entry : map.entrySet()) {
String key = entry.getKey();
User value = entry.getValue();
}
👉 실무에서는 entrySet()이 기본값이라고 생각하면 된다.
3️⃣ JS에서 Map처럼 쓰이는 Object 이해하기
Ajax 응답의 대부분은 아래 같은 JSON 형태다.
{
"userId": 3,
"userName": "dongjin",
"age": 27
}
이건 JS에서 Map과 같은 개념의 Object다.
4️⃣ JS Object + for문 핵심 3종 세트
① key만 필요할 때
for (let key in data) {
console.log(key);
}
② value만 필요할 때
Object.values(data).forEach(value => {
console.log(value);
});
③ key + value (가장 많이 사용)
Object.entries(data).forEach(([key, value]) => {
console.log(key, value);
});
👉 Java entrySet() ↔ JS Object.entries()
이 대응 관계를 기억하면 언어가 달라도 헷갈리지 않는다.
5️⃣ Java ↔ JS 사고 전환 매핑표
개념JavaJavaScript
| Map 구조 | Map<K,V> | Object(JSON) |
| key + value | entrySet() | Object.entries() |
| 반복 | enhanced for | forEach |
| 값 접근 | map.get(key) | obj[key] |
6️⃣ 실무에서 가장 많이 터지는 실수
❌ Map을 인덱스로 접근하려고 함
Map에는 순서가 없다
❌ JS에서 배열인지 객체인지 구분 못함
Array.isArray(data)
❌ for문부터 작성함
항상 **"이 데이터는 뭐지?"**부터 생각
7️⃣ 15분 완성 훈련 루틴
Step 1 (5분)
종이에 직접 쓰기
Map = 키로 찾는다
for = 전부 돌린다
Step 2 (5분)
같은 데이터를
- Java Map으로 한 번
- JS Object로 한 번
둘 다 반복문으로 출력
Step 3 (5분)
Ajax 응답을 보고
- 배열 → forEach
- 객체 → Object.entries
8️⃣ 다음 단계: 실무·면접 대비
🔹 실무 Ajax 응답 패턴 5가지
- 단일 객체 응답
- 리스트 응답
- Map 안에 List
- List 안에 Map
- 페이징 응답 구조
🔹 면접 단골 질문 대응
Q. Map과 List의 차이는?
정답 패턴
"List는 순서 기반, Map은 key 기반 조회에 최적화된 자료구조입니다"
🔹 훈련 문제
- Java Map → JS Object 변환
- JS Ajax 응답 → Java DTO 설계
마무리
Map과 for문은 문법 문제가 아니라 데이터 구조를 보는 눈의 문제다.
이 글의 핵심은 하나다.
Map을 보면 entrySet / Object.entries가 자동으로 떠오르면 성공
이 단계까지 오면 자바든 JS든 거의 안 막힌다.
반응형
'실전툴팁' 카테고리의 다른 글
| Java & JS(jQuery + Ajax) 실무를 지배하는 패턴 문법 정리 (0) | 2025.12.15 |
|---|---|
| 레거시 환경 적응법 + 기본 기능 구현 가이드 (0) | 2025.12.15 |