본문으로 건너뛰기

if와 else

자바스크립트 목차조건레슨 15 / 76

목차

if 문은 조건이 참(true)일 때만 중괄호 { } 안의 줄들을 한 번 실행합니다. else를 붙이면 조건이 거짓(false)일 때만 실행할 다른 갈래가 생깁니다.

나이에 따라 요금을 달리 찍으려면 실행할 줄을 골라야 합니다. if는 앞 레슨의 비교가 만든 true·false로 고르고, 고르는 대상이 어느 줄까지인지는 중괄호가 정합니다.

9단계 중 1단계. 1번 줄: age를 15에 붙입니다.

1if는 조건이 참일 때 덩어리를 한 번 실행한다

if 문은 if (조건) { 꼴로 시작합니다. 조건은 괄호로 감싸고, 여는 중괄호 {부터 닫는 중괄호 }까지가 한 덩어리(블록, block)입니다. 실행이 if 줄에 오면 조건을 한 번 계산합니다. true면 덩어리를 위에서 아래로 한 번 실행하고, false면 통째로 건너뜁니다. 어느 쪽이든 그다음에는 닫는 중괄호 아래 줄로 갑니다.

규칙 4. 들여쓰기가 아니라 중괄호가 덩어리를 정합니다. if는 덩어리를 한 번 실행할지 고릅니다.

const total = 14500;
if (total >= 10000) {
  console.log('쿠키 증정');
  console.log('도장 2개');
}
console.log('감사합니다');
실행 결과
쿠키 증정
도장 2개
감사합니다

total이 9000이면 조건이 false라서 3·4번 줄을 건너뛰고 감사합니다만 찍힙니다. 비교의 값에 붙인 이름도 조건이 됩니다(if (adult) {).

2else는 거짓일 때만 가는 갈래

else는 if 덩어리를 닫는 중괄호 뒤에 } else {로 잇고, 조건을 쓰지 않습니다. 바로 위 if의 조건이 false일 때만 실행하므로, 두 덩어리 가운데 꼭 하나만 실행됩니다.

const age = 15;
if (age >= 20) {
  console.log('성인');
} else {
  console.log('청소년');
}
console.log('끝');
실행 결과
청소년
끝

age가 25면 성인과 끝이 찍힙니다. 7번 줄은 두 덩어리의 중괄호 밖이라 어느 갈래를 지났든 실행됩니다.

3들여쓰기가 아니라 중괄호가 덩어리를 정한다

들여쓰기는 사람이 읽기 좋으라고 하는 것입니다. 아래 코드는 중괄호를 빼고 두 줄을 들여 썼습니다. 무엇이 찍힐까요? 답을 정한 뒤 펼쳐 보세요.

const age = 15;
if (age >= 20)
  console.log('성인 요금');
  console.log('입장');
실행 결과 보기
실행 결과
입장

예상과 다르면 그곳이 배울 곳입니다. 중괄호가 없으면 if에는 바로 뒤 문장 하나(3번 줄)만 듭니다. 4번 줄은 들여 썼어도 if 밖이라 늘 실행됩니다(규칙 4). 그래서 이 과목은 덩어리가 한 줄이어도 늘 중괄호를 씁니다.

4오류: 조건을 괄호로 감싸지 않으면

말하듯 조건을 괄호 없이 쓰면 문법 오류가 납니다.

const age = 25;
if age >= 20 {
  console.log('성인');
}
실행 결과
main.js:2if age >= 20 {   ^^^ SyntaxError: Unexpected identifier 'age'

Unexpected identifier 'age'⁠는 '여기서 이름 age는 뜻밖이다', 곧 if 바로 뒤에 여는 괄호가 아니라 이름이 왔다는 뜻입니다. 문법 오류라 1번 줄도 실행되지 않았습니다.

예제

합계가 2만 원 이상이면 2000원을 빼고, 아니면 빼지 않습니다. 8번 줄은 중괄호 밖이라 갈래와 상관없이 낼 돈을 찍습니다.

let total = 14500;
if (total >= 20000) {
  console.log('2000원 할인');
  total = total - 2000;
} else {
  console.log('할인 없음');
}
console.log(`낼 돈 ${total}원`);
실행 결과
할인 없음
낼 돈 14500원

자주 틀리는 곳

틀린 생각: if 아래에 들여 쓴 줄은 모두 그 if에 든다.

들여 쓴 줄은 눈으로 보기에 한 덩어리 같습니다. 그러나 아래 코드는 재고가 5개인데도 주문 막기를 찍습니다.

const stock = 5;
if (stock === 0)
  console.log('품절');
  console.log('주문 막기');
실행 결과
주문 막기

맞는 규칙: 중괄호가 없으면 if에는 바로 뒤 문장 하나만 듭니다. 덩어리에 넣을 줄은 모두 중괄호로 감쌉니다(규칙 4).

틀린 생각: 조건에서는 등호 하나로도 같은지 묻는다.

수학에서는 등호가 '같다'입니다. 그러나 아래 코드는 오류 없이 같다를 찍고, x는 5가 됩니다.

let x = 3;
if (x = 5) {
  console.log('같다');
}
console.log(x);
실행 결과
같다
5

2번 줄은 묻지 않고 x를 5에 다시 붙입니다. 그 값 5가 조건이 되고, 조건 자리에서 수는 0과 NaN만 거짓으로 칩니다(조건 자리의 값은 참 같은 값과 ??에서 모아 봅니다). x가 const 이름이면 이 줄에서 TypeError로 멈춥니다.

맞는 규칙: 등호 하나는 조건 안에서도 이름을 다시 붙입니다. 같은지는 === 연산자로 묻습니다(규칙 2).

틀린 생각: else는 반대 조건의 if를 하나 더 쓴 것과 같다.

말로는 '아니면'과 '반대 조건이면'이 같습니다. 그러나 아래 코드는 두 덩어리를 모두 실행합니다.

let x = 5;
if (x > 3) {
  x = 1;
}
if (x <= 3) {
  x = 9;
}
console.log(x);
실행 결과
9

3번 줄에서 x가 1이 된 뒤, 따로 선 5번 줄이 1 <= 3을 새로 계산했습니다. 4~5번 줄을 } else {로 이으면 1을 찍습니다.

맞는 규칙: else는 바로 위 if의 조건이 거짓일 때만 실행되고, 따로 선 if는 그 줄에서 조건을 새로 계산합니다. 하나만 실행하려면 else로 잇습니다(규칙 4).

틀린 생각: 덩어리 안에서 만든 이름은 덩어리 밖에서도 쓸 수 있다.

덩어리가 끝나도 이름은 남을 것 같습니다. 그러나 아래 discount는 닫는 중괄호에서 사라집니다.

const total = 25000;
if (total >= 20000) {
  let discount = 2000;
}
console.log(discount);
실행 결과
main.js:5console.log(discount);            ^ ReferenceError: discount is not defined    at main.js:5:13

맞는 규칙: let·const로 만든 이름은 그 중괄호 안에서만 삽니다. 밖에서도 쓸 이름은 if 앞에서 만들고(let discount = 0;), 덩어리 안에서는 다시 붙이기만 합니다. 이 말은 반복 단원의 for의 세 칸에서 규칙 4에 더합니다.

확인 문제

1. 예제의 total을 20000으로 바꿨습니다. 무엇이 찍히는지 줄마다 그대로 쓰세요.

let total = 20000;
if (total >= 20000) {
  console.log('2000원 할인');
  total = total - 2000;
} else {
  console.log('할인 없음');
}
console.log(`낼 돈 ${total}원`);
힌트

2번 줄에 total의 값을 넣었을 때 조건이 무엇으로 접히는지부터 보세요.

정답
실행 결과
2000원 할인
낼 돈 18000원

20000 >= 20000은 true라서 3·4번 줄이 실행되고 total이 18000에 다시 붙습니다. else 덩어리는 건너뜁니다.

흔한 오답은 할인 없음과 낼 돈 20000원입니다. >= 연산자를 '보다 크다'로 읽은 것입니다.

2. 재고가 있으면 주문 받기를, 없으면 품절을 찍고, 어느 쪽이든 마지막에 다음 손님을 찍으려 합니다. 빈칸 둘을 채우세요.

const stock = 0;
if (stock ___ 0) {
  console.log('주문 받기');
} ___ {
  console.log('품절');
}
console.log('다음 손님');
힌트

첫 빈칸은 재고가 있을 때만 true가 되는 비교입니다. 둘째 빈칸은 조건이 거짓일 때 가는 갈래의 머리입니다.

정답

차례로 > 연산자와 else입니다. 0 > 0은 false라서 품절과 다음 손님이 찍힙니다.

다르게 써도 되는 곳: 재고가 0보다 작아지지 않는다면 첫 빈칸에 !== 연산자를 써도 같습니다.

흔한 오답은 첫 빈칸의 >= 연산자입니다. 0 >= 0은 true라서 재고가 없는데도 주문 받기가 찍힙니다.

3. 걸음 수 앱의 코드입니다. 무엇이 찍히는지 마지막 줄까지 그대로 쓰세요.

const steps = 12000;
if (steps < 10000)
  console.log('조금 더');
  console.log('내일 또');
console.log(steps, '걸음');
힌트

2번 줄 if에 드는 문장이 어디까지인지 중괄호로 보세요.

정답
실행 결과
내일 또
12000 걸음

12000 < 10000은 false라서 if에 든 3번 줄만 건너뜁니다. 중괄호가 없어 4번 줄은 if 밖입니다.

흔한 오답은 12000 걸음 한 줄입니다. 들여 쓴 4번 줄도 if에 든다고 본 것입니다(들여쓰기가 덩어리라는 생각).

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 3절 코드(네 줄)를 main.js에 저장해 돌립니다(입장). 그다음 1번 줄을 const age = 25;로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다. 마지막으로 1번 줄을 15로 되돌리고 3·4번 줄을 중괄호로 감싸 돌려 봅니다. 저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.

끝까지 내려오면 저절로 표시됩니다. 이 기기에만 저장합니다.

자바스크립트 목차로