switch 문은 값 하나를 여러 case의 값과 위에서부터 견주어, 같은 case부터 break를 만날 때까지 실행합니다. 조건 연산자(conditional operator) 조건 ? 가 : 나는 조건에 따라 두 값 가운데 하나를 고르는 식입니다.
크기 S·M·L처럼 값 하나가 여러 가지 가운데 무엇인지에 따라 갈래가 나뉘면 else if를 늘어놓는 대신 switch를 씁니다.
값 하나만 고르면 될 때는 조건 연산자가 if·else보다 짧습니다.
1switch는 같은 값의 case로 간다
switch (값) { 안에 case 값:을 늘어놓습니다. 실행이 switch 줄에 오면 괄호 안 값을 한 번 계산하고, 위에서부터 case의 값과 === 연산자로 견줍니다.
처음 같은 case로 가서 그 아래 줄들을 실행하고, break를 만나면 닫는 중괄호 아래로 나갑니다.
어느 case와도 같지 않으면 default: 아래를 실행합니다. default는 하나만 둘 수 있고, else처럼 보통 맨 끝에 둡니다.
const size = 'XL';
switch (size) {
case 'S':
console.log('작게');
break;
case 'M':
console.log('보통');
break;
default:
console.log('없는 크기');
}없는 크기'XL'은 'S'와도 'M'과도 같지 않아 default 아래 10번 줄이 실행됩니다. size가 'M'이면 7번 줄의 보통만 찍히고, 8번 줄 break에서 나갑니다.
입력 칸에서 고른 테이블 번호가 글자 '2'로 들어왔습니다. 아래 코드는 무엇을 찍을까요? 답을 정한 뒤 펼쳐 보세요.
const table = '2';
switch (table) {
case 2:
console.log('창가 자리');
break;
default:
console.log('없는 자리');
}실행 결과 보기
없는 자리예상과 다르면 그곳이 배울 곳입니다.
switch는 === 연산자로 견주므로 글자 '2'와 수 2는 같지 않습니다. 그래서 case 2로 가지 않고 default 아래 7번 줄이 실행됩니다.
2break가 없으면 아래로 흘러내린다
break는 '여기서 switch를 나가라'는 문장입니다. break가 없으면 다음 case 줄은 견주지도 않고, 그 아래 줄을 이어서 실행합니다.
이것을 흘러내림(fall-through)이라고 부릅니다(자료에 따라 폴스루라고도 부릅니다). 그래서 case 덩어리마다 끝에 break를 씁니다(맨 끝 갈래는 빼도 같습니다).
흘러내림을 일부러 쓰기도 합니다. case '토': 바로 아래에 case '일':을 붙여 두면 두 값이 한 갈래(주말)로 묶입니다.
3두 값 가운데 하나를 고르는 조건 연산자
조건 ? 가 : 나는 조건이 참 같은 값이면 가를, 아니면 나를 돌려주는 식입니다(자료에 따라 삼항 연산자라고도 부릅니다).
식이라서 대입의 오른쪽에 바로 씁니다. 2~3번 줄은 한 문장이고, 폰 화면에 맞추려고 등호 뒤에서 나눴습니다.
const age = 25;
const label =
age >= 20 ? '성인' : '청소년';
console.log(label);성인if·else로 쓰면 label을 먼저 만들고 갈래마다 다시 붙여야 해 다섯 줄이 넘습니다. 두 값 가운데 하나를 고를 때만 조건 연산자를 씁니다.
예제
메뉴 이름으로 값을 고릅니다. 갈래마다 price를 다시 붙이고 break로 나갑니다.
const menu = '라테';
let price = 0;
switch (menu) {
case '커피':
price = 4000;
break;
case '라테':
price = 4500;
break;
}
console.log(menu, `${price}원`);라테 4500원자주 틀리는 곳
틀린 생각: break를 빠뜨려도 그 case 덩어리만 실행된다.
case마다 줄이 나뉘어 있어 저절로 끊길 것 같습니다. 그러나 아래 커피 값은 오류 없이 4500이 됩니다.
const menu = '커피';
let price = 0;
switch (menu) {
case '커피':
price = 4000;
case '라테':
price = 4500;
}
console.log(price);45005번 줄 뒤에 break가 없어 7번 줄까지 흘러내려, price가 4500에 다시 붙었습니다.
맞는 규칙: break를 만나야 switch를 나갑니다. case 덩어리마다 끝에 break를 씁니다.
틀린 생각: case 1:에는 글자 '1'도 걸린다.
입력 칸에서 고른 번호는 글자입니다. switch는 === 연산자로 견주므로 글자 '1'과 수 1은 같지 않습니다.
const pick = '1';
switch (pick) {
case 1:
console.log('커피');
break;
default:
console.log('없는 번호');
}없는 번호맞는 규칙: switch는 종류까지 같아야 그 case로 갑니다. 바깥에서 온 글자는 switch (Number(pick)) {처럼 수로 바꿔 견줍니다.
틀린 생각: case에 범위 조건을 쓰면 그 범위에서 걸린다.
if처럼 case total >= 20000:을 쓰면 2만 원 이상에서 걸릴 것 같습니다. 그러나 25000원에도 할인이 없습니다.
const total = 25000;
switch (total) {
case total >= 20000:
console.log('2000원 할인');
break;
default:
console.log('할인 없음');
}할인 없음3번 줄의 total >= 20000은 true로 접히고, switch는 25000과 true를 === 연산자로 견줍니다. 둘은 같지 않습니다.
맞는 규칙: switch는 값이 같은지만 견줍니다. 범위로 고르는 갈래는 else if로 씁니다.
틀린 생각: 조건 연산자를 겹쳐 쓰면 짧고 읽기 좋다.
조건 연산자 안에 조건 연산자를 넣으면 갈래 셋도 한 문장에 들어갑니다. 그러나 화면에 맞추면 이렇게 됩니다.
const score = 85;
const grade =
score >= 90
? 'A'
: score >= 80
? 'B'
: 'C';
console.log(grade);B어느 ?와 :이 짝인지 찾으려면 들여쓰기를 한 칸씩 따라가야 합니다.
맞는 규칙: 조건 연산자는 두 값 가운데 하나를 고를 때만 씁니다. 갈래가 셋 이상이면 else if로 씁니다.
확인 문제
1. 예제의 menu를 '녹차'로 바꿨습니다. 무엇이 찍히는지 그대로 쓰세요.
const menu = '녹차';
let price = 0;
switch (menu) {
case '커피':
price = 4000;
break;
case '라테':
price = 4500;
break;
}
console.log(menu, `${price}원`);힌트
'녹차'와 같은 case가 있는지, default가 있는지 보세요.
정답
녹차 0원같은 case도 default도 없어 switch 안의 줄은 하나도 실행되지 않습니다. price는 2번 줄의 0 그대로입니다.
흔한 오답은 녹차 4500원입니다. 맞는 case가 없으면 마지막 case가 실행된다고 본 것입니다.
2. 잔 수가 있으면 2잔 같은 글자에, 0잔이면 없음에 이름 msg를 붙이려 합니다. 빈칸 둘을 채우고, 이 코드가 무엇을 찍는지도 쓰세요.
const qty = 0;
const msg =
qty ___ `${qty}잔` ___ '없음';
console.log(msg);힌트
조건 연산자는 조건 ? 참일 때 값 : 거짓일 때 값 차례입니다. 3번 줄의 조건은 qty 하나입니다.
정답
차례로 ?와 :이고, 없음을 찍습니다. qty는 0이라 거짓 같은 값이고, : 뒤의 값을 고릅니다. qty가 2면 2잔을 찍습니다.
다르게 써도 되는 곳: 조건을 qty > 0으로 써도 같습니다.
흔한 오답은 두 기호의 자리를 바꾸는 것입니다. 콜론부터 쓰면 문법 오류(SyntaxError)가 납니다.
3. 시간표 앱의 코드입니다. 무엇이 찍히는지 마지막 줄까지 그대로 쓰세요.
const day = '수';
switch (day) {
case '월':
console.log('국어');
case '수':
console.log('수학');
case '금':
console.log('과학');
}힌트
어느 case에서 들어가는지 찾고, 그 아래에 break가 있는지 보세요.
정답
수학
과학'수'와 같은 5번 줄 case로 들어가 6번 줄을 실행합니다. break가 없어 7번 줄은 견주지 않고 8번 줄까지 흘러내립니다.
흔한 오답은 수학 한 줄입니다. break 없이도 그 case 덩어리에서 멈춘다고 본 것입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
예제를 main.js에 저장해 돌립니다(라테 4500원). 그다음 1번 줄을 '커피'로 바꾸고 6번 줄 break;를 지우면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.