else if는 if와 else 사이에 갈래를 더 놓습니다. 자바스크립트는 위에서부터 조건을 하나씩 보다가 처음 참인 갈래 하나만 실행하고, 그 아래 조건은 보지도 않습니다.
if·else로는 갈래가 둘뿐입니다. 주문 금액이 2만 원 이상이면 2000원, 1만 원 이상이면 1000원을 빼고 그 밖에는 빼지 않는 것처럼 갈래가 셋 이상이면 else if를 씁니다.
갈래가 여럿이면 조건을 놓는 차례에 따라 결과가 달라집니다.
1위에서부터 보다가 처음 참인 갈래로
else if는 앞 덩어리를 닫는 중괄호 뒤에 } else if (조건) { 꼴로 잇고, 몇 개든 둘 수 있습니다. else는 맨 끝에 하나만 두거나 두지 않습니다.
실행은 if 줄부터 조건을 하나씩 계산합니다. false면 그 덩어리를 건너뛰고 다음 else if 줄로 갑니다.
처음 true가 나온 갈래의 덩어리를 실행하면, 남은 갈래는 조건도 계산하지 않고 모두 건너뜁니다. 모든 조건이 false면 else 덩어리를 실행합니다(규칙 4).
const total = 15000;
if (total >= 20000) {
console.log('2000원 할인');
} else if (total >= 10000) {
console.log('1000원 할인');
} else {
console.log('할인 없음');
}1000원 할인total이 달라지면 실행되는 갈래가 이렇게 바뀝니다.
total | 2번 줄 | 4번 줄 | 실행되는 줄 |
|---|---|---|---|
| 25000 | true | 보지 않음 | 3번 — 2000원 할인 |
| 15000 | false | true | 5번 — 1000원 할인 |
| 9000 | false | false | 7번(else) — 할인 없음 |
갈래가 몇 개든 실행되는 덩어리는 많아야 하나입니다. else가 없으면 모든 조건이 거짓일 때 아무 덩어리도 실행되지 않습니다.
2조건의 차례가 결과를 바꾼다
70세에게 아래 코드는 무엇을 찍을까요? 답을 정한 뒤 펼쳐 보세요.
const age = 70;
if (age >= 20) {
console.log('성인');
} else if (age >= 65) {
console.log('경로');
}실행 결과 보기
성인예상과 다르면 그곳이 배울 곳입니다.
자바스크립트는 더 잘 맞는 갈래를 찾지 않습니다. 위에서부터 보다가 처음 true가 된 2번 줄의 갈래 하나만 실행하고, 4번 줄은 계산하지도 않습니다(규칙 4).
'20세 이상'이라는 넓은 조건은 '65세 이상'이라는 좁은 조건을 감쌉니다. 65세 이상은 모두 20세 이상이기도 하기 때문입니다. 그래서 넓은 조건을 위에 두면 그 아래 좁은 조건의 갈래는 어떤 값에서도 실행되지 않습니다. 조건이 서로 감싸면 좁은 조건부터 위에 놓습니다.
3오류: elseif라고 붙여 쓰면
else if는 else 뒤에 if 문을 하나 더 이은 것이라 두 낱말 사이를 띄웁니다. elseif나 elif처럼 줄여 쓰면 문법 오류가 납니다.
const total = 25000;
if (total >= 20000) {
console.log(total);
} elseif (total >= 10000) {
console.log(total);
}main.js:4} elseif (total >= 10000) { ^ SyntaxError: Unexpected token '{'Unexpected token '{'는 '여기서 {는 뜻밖이다', 곧 이 자리에 여는 중괄호가 올 수 없다는 뜻입니다.
^는 elseif가 아니라 줄 끝의 {를 가리킵니다. 자바스크립트가 elseif (…)까지는 처음 보는 이름 elseif를 부르는 식으로 읽고, 그 뒤의 {에서 문제를 발견했기 때문입니다. ^는 고칠 곳이 아니라 문제를 발견한 자리입니다.
예제
갈래를 고르는 코드 '고르기'는 조건 세우기 → 갈래마다 할 일 → 갈래 뒤 공통 세 걸음으로 쓰고, 걸음마다 주석 머리줄을 답니다.
const total = 25000;
// 1. 조건 세우기
const big = total >= 20000;
const sale = total >= 10000;
// 2. 갈래마다 할 일
let discount = 0;
if (big) {
discount = 2000;
} else if (sale) {
discount = 1000;
}
// 3. 갈래 뒤 공통
const pay = total - discount;
console.log(`낼 돈 ${pay}원`);낼 돈 23000원- 1. 조건 세우기: 조건의 값에 먼저 이름을 붙입니다.
big은 '2만 원 이상인가',sale은 '1만 원 이상인가'이고, 25000원이면 둘 다true입니다. 이렇게 참·거짓 값 하나에 붙어 갈래를 고르는 데 쓰는 이름을 깃발이라고 부릅니다. - 2. 갈래마다 할 일: 덩어리 밖에서도 쓸
discount를 먼저 0에 붙여 두고, 좁은 조건의 깃발big부터 봅니다. - 3. 갈래 뒤 공통: 중괄호 밖의 줄은 어느 갈래를 지났든 실행되어 낼 돈을 찍습니다.
자주 틀리는 곳
틀린 생각: 넓은 조건을 위에 둬도 아래 갈래가 제 값에서 실행된다.
85점이면 '80점 이상' 갈래가 실행될 것 같습니다. 그러나 아래 코드는 C를 찍고, B 갈래는 어떤 점수에서도 실행되지 않습니다.
const score = 85;
if (score >= 70) {
console.log('C');
} else if (score >= 80) {
console.log('B');
}C맞는 규칙: else if는 위에서부터 처음 참인 갈래 하나만 실행합니다. 서로 감싸는 조건은 좁은 것부터 놓습니다(규칙 4).
틀린 생각: if를 여럿 이어 써도 else if처럼 갈래 하나만 실행된다.
if 줄이 위아래로 붙어 있으면 한 묶음의 갈래처럼 보입니다. 그러나 95점에 등급이 둘 찍힙니다.
const score = 95;
if (score >= 90) {
console.log('A');
}
if (score >= 80) {
console.log('B');
}A
B맞는 규칙: 따로 선 if는 앞 갈래와 상관없이 그 줄에서 조건을 새로 계산해, 참인 덩어리가 모두 실행됩니다. 하나만 골라야 하면 둘째부터 else if로 잇습니다(규칙 4).
확인 문제
1. 1절 코드의 total을 20000으로 바꿨습니다. 무엇이 찍히는지 그대로 쓰세요.
const total = 20000;
if (total >= 20000) {
console.log('2000원 할인');
} else if (total >= 10000) {
console.log('1000원 할인');
} else {
console.log('할인 없음');
}힌트
2번 줄의 조건부터 total의 값을 넣어 보세요.
정답
2000원 할인20000 >= 20000이 true라서 3번 줄을 실행하고, 4번 줄 아래는 보지 않습니다.
흔한 오답은 1000원 할인입니다. >= 연산자를 '보다 크다'로 읽어 2번 줄을 false로 본 것입니다.
2. 예제의 '2. 갈래마다 할 일'에 들어갈 다섯 줄이 섞여 있습니다. 들여쓰기는 맞게 적었습니다.
㉠ discount = 1000;
㉡ } else if (sale) {
㉢ if (big) {
㉣ }
㉤ discount = 2000;
다섯 줄은 아래 코드의 6번 줄 let discount = 0; 바로 아래에 들어갑니다.
const total = 15000;
// 1. 조건 세우기
const big = total >= 20000;
const sale = total >= 10000;
// 2. 갈래마다 할 일
let discount = 0;
// 3. 갈래 뒤 공통
console.log(discount);(가) 다섯 줄의 차례를 기호로 쓰고, 다 맞춘 코드가 무엇을 찍는지도 쓰세요.
(나) big을 sale보다 먼저 보는 까닭으로 맞는 것을 고르세요.
- ① 2만 원 이상이면
sale도true라서,sale을 먼저 보면 2000원 갈래에 닿지 못하기 때문 - ② 자바스크립트가 가장 잘 맞는 갈래를 골라 주니 결과는 같고, 읽기 좋으라고 큰 금액부터 쓰기 때문
- ③ 참인 갈래가 모두 실행되니, 큰 할인을 먼저 붙인 뒤 작은 할인을 더해야 하기 때문
힌트
'2. 갈래마다 할 일' — 갈래 머리(if·else if)를 위에서부터 놓고, 머리마다 그 갈래의 할인 금액 줄을 붙인 뒤 닫는 중괄호로 끝냅니다.
정답
(가) ㉢ ㉤ ㉡ ㉠ ㉣이고, 1000을 찍습니다. 15000원이라 big은 false, sale은 true입니다. 서로 바꿔도 되는 줄은 없습니다.
(나) ①입니다. 25000원이면 big과 sale이 모두 true이고, 처음 참인 갈래 하나만 실행되므로 sale을 먼저 보면 2000원 갈래는 실행되지 않습니다.
②는 자바스크립트가 가장 잘 맞는 갈래를 찾아 준다고 본 것입니다. 2절처럼 차례를 바꾸면 결과가 달라집니다. ③은 else if를 따로 선 if 여럿처럼 본 것입니다.
3. 장보기 앱이 무게(kg)에 따라 배송비를 정합니다. 무엇이 찍히는지 쓰세요.
const kg = 12;
let fee = 0;
if (kg > 5) {
fee = 3000;
}
if (kg > 10) {
fee = 5000;
}
console.log(fee);힌트
3번 줄과 6번 줄은 else if로 이어져 있나요, 따로 서 있나요?
정답
5000두 if가 따로 서 있어 둘 다 조건을 계산합니다. 12 > 5가 참이라 fee가 3000에 붙고, 이어서 12 > 10도 참이라 5000에 다시 붙습니다.
흔한 오답은 3000입니다. 따로 선 if 둘을 else if처럼 하나만 실행된다고 본 것입니다. 5~6번 줄을 } else if (kg > 10) { 한 줄로 이으면 정말로 3000이 찍힙니다 — 넓은 조건이 위에 있기 때문입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
예제를 main.js에 저장해 돌립니다(낼 돈 23000원). 그다음 7번 줄과 9번 줄의 깃발 이름만 서로 바꿔 if (sale) {와 } else if (big) {로 쓰면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.