왕진 블로그
JavaScript switch 문 —
커피 주문으로 배우는 값 분기
사용자가 prompt()로 커피 이름을 입력하면, switch 문이 그 값을 여러 case와 비교해서 가격을 정하는 코드다. 특히 espresso와 에스프레소 두 case가 break 없이 연달아 붙어서 같은 처리를 공유하는 부분이 이번 글의 핵심이다.
switch 문으로 커피 주문
prompt 창에 카페라떼 입력 → 확인 클릭
카페라떼는 3500원입니다.
이 코드를 if-else로 쓰면 if(coffee == "espresso" || coffee == "에스프레소") {...} else if(coffee == "카푸치노") {...} else if(coffee == "카페라떼") {...} else {...} 처럼 비교 대상(coffee)을 매번 반복해서 써야 한다. switch는 "이 값(coffee)을 기준으로 비교한다"고 맨 위에서 한 번만 선언하고, 아래는 "그 값이 뭐면 어떻게" 라는 case만 나열하면 된다.
switch(coffee)는 "이제부터 coffee 변수의 값을 기준으로 아래 case들과 하나씩 비교하겠다"는 선언이다. 브라우저는 이 값을 들고 내려가면서 case 라벨에 적힌 값과 순서대로 맞춰본다. 일치하는 case를 찾으면 그 지점부터 코드를 실행한다.
이 네 단계가 switch 전체의 동작 원리다. 이후 섹션들은 결국 이 네 단계 중 어디에서 무슨 일이 벌어지는지를 하나씩 뜯어보는 것이다.
case "카푸치노" : 에서 콜론(:) 앞은 "비교할 값"이고, 콜론 뒤에 오는 코드가 "일치했을 때 실행할 문장"이다. 즉 case 라벨 자체는 실행되는 코드가 아니라 이정표 역할만 한다. 실제 실행은 일치하는 이정표를 찾은 지점부터 아래로 순서대로 흘러간다.
- switch는 case를 위에서부터 순서대로 검사한다
- 일치하는 case를 찾으면 그 지점부터 실행 시작
- break가 없으면 그 아래 case까지 계속 실행(다음 섹션)
코드를 눈으로만 읽으면 헷갈리기 쉬우니, 사용자가 카푸치노를 입력했다고 가정하고 브라우저가 처리하는 순서를 단계별로 풀어보자.
이 코드에서 가장 중요한 부분이다.
case "espresso" : 라벨 바로 아래에는 실행문이 하나도 없다. 그래서 coffee가 "espresso"와 일치해도, 실행할 코드가 없으니 그대로 다음 줄(다음 case)로 흘러내려간다(fall-through). 다음 줄이 마침 case "에스프레소" :이고, 그 아래 price = 2000;이 있으니 결국 두 case 모두 같은 처리(2000원 책정)를 하게 되는 것이다.
price = 2000. break가 없는 case는 "나는 실행문이 없으니 아래 case를 그대로 이어받겠다"는 뜻이다.반대로 price = 2000; 다음에 오는 break;는 "여기서 끝, switch 밖으로 나가라"는 명령이다. break가 있기 때문에 카푸치노 case로 흘러가지 않고 switch 블록을 즉시 탈출한다.
default는 if-else의 마지막 else와 같은 역할이다. coffee 값이 "espresso", "에스프레소", "카푸치노", "카페라떼" 어느 것과도 일치하지 않으면 default 블록이 실행되어 coffee + "는 없습니다."를 출력한다.
prompt("무슨 커피 드릴까요?", "")는 사용자가 입력창에 무엇을 입력하든 문자열(string)로 coffee 변수에 저장한다. 그래서 case 값들도 "espresso", "카푸치노"처럼 전부 문자열로 맞춰져 있다. 만약 case에 숫자 2000처럼 다른 타입을 써두면 절대 일치하지 않는다(다음 섹션 참고).
또한 switch의 case는 정확히 같은 값 하나만 비교할 수 있다. "가격이 3000원 이상이면" 같은 범위 조건은 case에 쓸 수 없다 — 그런 경우는 if-else가 필요하다.
switch의 case 비교는 ==(느슨한 비교)가 아니라 ===(엄격 비교) 방식으로 동작한다. 즉 값뿐 아니라 타입까지 같아야 일치로 인정한다. 그래서 coffee가 문자열 "2000"이고 case가 숫자 2000이면 겉보기엔 같아 보여도 매칭되지 않는다.
case "카푸치노" → 매칭 ✓
case 2000 (숫자) → 매칭 ✗
Number(coffee)로 변환하거나 case 값도 문자열로 통일해야 한다.| 실수 | 증상 | 해결 |
|---|---|---|
case 안에 break 빠뜨림 |
의도치 않게 다음 case까지 전부 실행됨(fall-through) | 공유 처리가 목적이 아니라면 각 case 끝에 break 추가 |
default를 중간에 둠 |
동작은 하지만 가독성 떨어짐 — "다 안 걸리면"이라는 의미가 헷갈림 | 관례대로 default는 맨 마지막에 배치 |
| 타입 다른 값 비교 ("2000" vs 2000) | case가 절대 일치하지 않아 default로만 빠짐 | prompt 결과는 문자열임을 기억, 필요하면 Number()로 변환 |
| case에 범위 조건(>=, < 등) 시도 | 원하는 대로 동작하지 않음 | 범위 비교는 switch 대신 if-else 사용 |
| default 안에 break 없이 그 뒤 코드 이어짐 | 큰 문제는 없지만(default가 보통 마지막) 헷갈릴 수 있음 | 다른 case 뒤에 default를 둘 땐 반드시 break로 마무리 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript 함수 — 선언·파라미터·return 완전 정리 (0) | 2026.07.03 |
|---|---|
| JavaScript break · continue — 반복 제어 완전 정리 (0) | 2026.07.03 |
| JavaScript 반복문 — for · while · do-while 완전 정리 (0) | 2026.07.03 |
| JavaScript 문자열 연산 — 타입 혼합과 비교 완전 정리 (0) | 2026.07.03 |
| JavaScript 대입·조건 연산자 완전 정리 (0) | 2026.07.03 |
댓글