지금까지 쓴 코드는 위에서 아래로 한 줄씩 흘렀다. 예외 없이 전부 실행됐다.

이제 갈림길을 만든다. 어떤 조건이면 이 길로, 아니면 저 길로. 프로그램이 판단하기 시작하는 지점이다.

if — 조건이 참이면 실행한다

const age = 20;

if (age >= 19) {
  console.log("입장 가능");
}

• 입장 가능

괄호 ( ) 안에 조건을 쓰고, 중괄호 { } 안에 실행할 코드를 둔다. 조건이 참이면 중괄호 안이 실행되고, 거짓이면 통째로 건너뛴다.

조건 자리에 들어가는 값은 6강과 7강에서 본 그대로다. boolean이 아니어도 되고, truthy면 통과한다.

else 로 반대편을 만든다

const age = 15;

if (age >= 19) {
  console.log("입장 가능");
} else {
  console.log("입장 불가");
}

• 입장 불가

else에는 조건이 없다. if가 거짓일 때 무조건 실행된다. 두 길 중 반드시 하나만 지나간다.

else if 로 갈림길을 늘린다

const score = 85;

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

• B

여기에 초보자가 놓치는 핵심이 있다. 위에서부터 검사하다가 처음 참인 곳에서 멈춘다.

1. score >= 90거짓 → 다음
2. score >= 80참 → 여기서 끝
3. score >= 70검사조차 안 함
4. else도달하지 않음

85 >= 70도 참이지만 C는 출력되지 않는다. 이미 B에서 빠져나왔기 때문이다.

그래서 순서가 결과를 바꾼다. 아래는 흔한 버그다.

const score = 95;

if (score >= 70) {
  console.log("C");
} else if (score >= 90) {
  console.log("A");
}

• C

95점인데 C가 나왔다. 조건을 느슨한 것부터 썼기 때문에 첫 줄에서 걸려버렸다.

중괄호를 생략하지 않는다

문장이 하나면 중괄호를 빼도 문법상 허용된다. 하지만 권하지 않는다.

let isMember = false;

if (isMember)
  console.log("환영합니다");
  console.log("포인트가 적립됐습니다");

• 포인트가 적립됐습니다

들여쓰기가 같아서 둘 다 if에 속한 것처럼 보이지만, 실제로 if에 묶인 건 첫 줄뿐이다. 두 번째 줄은 조건과 무관하게 항상 실행된다.

들여쓰기는 사람만 본다. 자바스크립트는 중괄호만 본다. 줄이 하나여도 중괄호를 친다.

삼항 연산자 — 짧은 if/else

값을 고르는 것뿐이라면 한 줄로 줄일 수 있다.

const age = 20;

let status;
if (age >= 19) {
  status = "성인";
} else {
  status = "미성년자";
}

const status2 = age >= 19 ? "성인" : "미성년자";

console.log(status, status2);

• 성인 성인

읽는 법은 이렇다.

1. age >= 19조건
2. ?물어본다
3. "성인"참이면 이 값
4. :아니면
5. "미성년자"거짓이면 이 값

if문은 실행하고, 삼항 연산자는 값을 낸다. 그래서 변수에 바로 담거나 문자열 안에 끼워 넣을 수 있다.

const count = 1;
console.log(`장바구니에 ${count}개 ${count > 1 ? "상품들이" : "상품이"} 있다`);

• 장바구니에 1개 상품이 있다

switch — 값이 정확히 무엇인지로 나눈다

같은 변수를 여러 값과 견줄 때는 switch가 깔끔하다.

const day = "wed";

switch (day) {
  case "mon":
    console.log("월요일");
    break;
  case "wed":
    console.log("수요일");
    break;
  case "fri":
    console.log("금요일");
    break;
  default:
    console.log("모르는 요일");
}

• 수요일

switch가 값을 받아 case와 하나씩 견주고, 맞는 곳부터 실행한다. default는 아무 case에도 맞지 않을 때 실행되며 else와 같은 역할이다.

break 를 빠뜨리면 아래로 흘러내린다

switch의 가장 큰 함정이다.

const day = "mon";

switch (day) {
  case "mon":
    console.log("월요일");
  case "wed":
    console.log("수요일");
  case "fri":
    console.log("금요일");
}

• 월요일
• 수요일
• 금요일

break가 없으면 맞는 case를 찾은 뒤 아래를 전부 실행한다. 이걸 폴스루(fall-through)라 부른다. 대부분은 실수지만, 일부러 쓰기도 한다.

const day = "sat";

switch (day) {
  case "sat":
  case "sun":
    console.log("주말이다");
    break;
  default:
    console.log("평일이다");
}

• 주말이다

case "sat"에 아무것도 안 쓰고 아래로 흘려보내, 토요일과 일요일을 같이 처리했다. 이런 의도적 사용이 아니라면 모든 case에 break를 붙인다.

if 와 switch, 무엇을 쓰나

if / else if

범위나 복합 조건

• score >= 90 같은 범위
• a && b 같은 복합 조건
• 조건마다 검사 대상이 달라도 된다
• 대부분의 경우 이걸 쓴다

switch

한 값의 정확한 일치

• 변수 하나를 여러 값과 견줄 때
• 요일, 상태, 타입 이름 등
• case 가 많아질수록 if 보다 읽기 좋다
• break 를 잊지 않는다

정리하면

• if는 조건이 truthy면 중괄호 안을 실행한다.
• else if는 위에서부터 검사하고 첫 번째 참에서 멈춘다. 범위 조건은 좁은 것부터 쓴다.
• 줄이 하나여도 중괄호를 친다. 자바스크립트는 들여쓰기를 보지 않는다.
• 삼항 연산자는 값을 고를 때만 쓰고, 겹쳐 쓰지 않는다.
• switch는 ===로 비교하며, break를 빠뜨리면 아래로 흘러내린다.

다음 강의는 반복문이다. 같은 일을 백 번 시키는 법을 배운다.