if와 else로 판단하기

if 문은 조건이 true일 때만 코드 묶음을 실행합니다. else if를 쓰면 자바스크립트는 위에서부터 조건을 확인하다가 처음 true가 나온 곳에서 멈춥니다.

어떤 때만 실행하는 코드

지금까지의 프로그램은 매번 모든 줄을 실행했습니다. 쓸모 있는 프로그램은 상황에 따라 다르게 움직입니다. 게임은 점수가 충분할 때만 "You win"을 보여 주고, 쇼핑몰은 주문 금액이 적을 때만 배송비를 붙입니다. 자바스크립트는 if 문으로 이런 선택을 합니다.

const temperature = 31;
if (temperature >= 30) {
  console.log("Hot day. Drink water.");
}
console.log("Done");

조건은 if 뒤의 괄호 안에 씁니다. 불리언을 만드는 식이면 무엇이든 되고, 보통 지난 단원의 비교를 씁니다. 조건이 true일 때 실행할 코드는 중괄호 안에 넣는데, 이것을 블록이라고 합니다. 조건이 false면 자바스크립트는 블록 전체를 건너뛰고 닫는 중괄호 다음부터 이어 갑니다. 위 코드에서는 두 줄이 모두 출력됩니다. temperature를 20으로 바꾸면 "Done"만 나옵니다. 블록 안의 줄은 빈칸 두 개만큼 들여 씁니다. 자바스크립트에 들여쓰기가 꼭 필요한 것은 아니지만, 어느 줄이 if에 속하는지 한눈에 보이고 경험 있는 프로그래머라면 누구나 그렇게 쓰기를 기대합니다.

else: 다른 길

조건이 true일 때와 false일 때 서로 다른 일을 하고 싶을 때가 많습니다. 그럴 때는 else 블록을 붙입니다. 두 블록 중 정확히 하나만 실행됩니다. 둘 다 실행되거나 둘 다 건너뛰는 일은 없습니다.

const n = 7;
if (n % 2 === 0) {
  console.log(n + " is even");
} else {
  console.log(n + " is odd");
}
// prints: 7 is odd

else if: 셋 이상 고르기

가능성이 여러 개면 else if로 조건을 이어 붙입니다. 자바스크립트는 위에서부터 차례로 확인합니다. 하나가 true가 되면 그 블록을 실행하고, 뒤쪽 조건이 true라도 나머지를 모두 건너뜁니다. 마지막 else는 위에서 아무것에도 맞지 않은 경우를 모두 받습니다.

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}
// prints: C

조건의 순서가 중요합니다. 점수가 95면 첫 조건이 이미 true라서 A가 출력됩니다. 조건을 거꾸로, score >= 70부터 썼다면 95점도 첫 조건에서 멈춰 C가 나옵니다. 이렇게 범위가 겹칠 때는 가장 좁은 조건을 맨 앞에 둡니다. 손으로 코드를 따라가 보는 습관이 좋습니다. 값을 하나 정하고, 위에서부터 읽으며 어느 갈래로 가는지 소리 내어 말해 보세요.

겹쳐 쓰기와 묶어 쓰기

블록 안에 다른 if 문을 넣을 수도 있는데, 이를 중첩이라고 합니다. 지난 단원의 &&와 ||로 조건을 묶으면 깊은 중첩을 피할 수 있는 경우가 많습니다. 아래 두 코드는 같은 일을 하고, 두 번째가 읽기 쉽습니다.

if (age >= 8) {
  if (height >= 120) {
    console.log("You can ride");
  }
}

if (age >= 8 && height >= 120) {
  console.log("You can ride");
}

조건 연산자

두 값 중 하나만 고르면 될 때는 조건(삼항) 연산자라는 짧은 표기가 있습니다. 조건 ? 참일 때 값 : 거짓일 때 값 모양입니다. 예를 들어 const label = n % 2 === 0 ? "even" : "odd";처럼 씁니다. 값을 짧게 고를 때 쓰고, 문 여러 개를 실행해야 하면 보통의 if와 else가 더 분명합니다.

흔한 실수는 조건 안에 등호를 하나만 쓰는 것입니다. if (score = 100)은 비교하지 않고 score에 100을 저장해 버려서 블록이 매번 실행됩니다. 비교는 언제나 ===로 합니다.