조건문 — if·else·switch·삼항

조건은 거의 모든 프로그램의 뼈대입니다. "X 면 Y, 아니면 Z" — JS 가 이걸 표현하는 방법은 4가지입니다. if/else if/else, switch, 삼항 연산자(?:), 그리고 짧은 분기에 쓰는 단락 평가(&&·||·??). 6편에서 각각 언제 쓰는지 정리합니다.

if · else if · else — 기본형

const age = 19;

if (age >= 19) {
  console.log("성인");
} else if (age >= 13) {
  console.log("청소년");
} else {
  console.log("어린이");
}

한 줄짜리는 중괄호를 생략해도 되지만 — 항상 중괄호를 쓰는 것을 권장합니다. 다음과 같은 버그를 차단해 줍니다.

// 중괄호 없이
if (loggedIn)
  showProfile();
  showSettings();   // ← if 와 무관, 항상 실행됨!

// 중괄호와 함께 (안전)
if (loggedIn) {
  showProfile();
  showSettings();
}

switch — 같은 값으로 여러 분기

const day = new Date().getDay();   // 0(일)~6(토)

switch (day) {
  case 0:
  case 6:
    console.log("주말");
    break;
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("평일");
    break;
  default:
    console.log("불가능한 값");
}

switch 의 비교는 === 입니다(엄격 동등). 그래서 case "5" 와 case 5 는 다른 분기입니다. 각 case 끝에 break 를 꼭 — 빠뜨리면 다음 case 까지 흘러 들어가는(fall-through) 사고가 납니다. 위 코드는 0/6 case 에 break 가 없는 게 의도된 fall-through 입니다.

switch 가 if 보다 좋을 때

• 하나의 변수를 3개 이상의 고정 값으로 분기
• 각 분기의 동작이 비슷한 모양
• default 가 의미 있는 경우

반대로 범위 조건(>=)·여러 변수 조합·복잡한 표현식 은 if/else 가 자연스럽습니다.

삼항 연산자 — 한 줄 분기

// if/else 4줄을 한 줄로
const label = age >= 19 ? "성인" : "미성년";

// 변수 할당
const fee = isMember ? 0 : 5000;

// 함수 반환
function grade(score) {
  return score >= 90 ? "A" : score >= 80 ? "B" : "C";
}

// React 조건부 렌더
{user ? <UserMenu /> : <LoginButton />}

단락 평가 — &&·||·??·?. 의 분기

// && — 왼쪽이 truthy 면 오른쪽 실행
isLoggedIn && loadProfile();

// || — 왼쪽이 falsy 면 기본값
const name = userName || "익명";

// ?? — 왼쪽이 null/undefined 일 때만 기본값 (0, "" 유지)
const port = config.port ?? 3000;

// ?. — 옵셔널 체이닝 (있으면 호출, 없으면 undefined)
user?.profile?.address?.city
callback?.()
arr?.[0]

이 네 가지를 알면 if 가 줄어듭니다. 특히 옵셔널 체이닝 ?. 은 "이 객체가 있으면" 류의 if 더미를 한 줄로 정리해 줍니다.

분기 표현 선택 가이드

guard clause (early return) — 중첩 줄이기

// 나쁜 패턴 — 중첩 5층
function process(user) {
  if (user) {
    if (user.active) {
      if (user.age >= 19) {
        if (user.subscribed) {
          // 실제 로직
        }
      }
    }
  }
}

// 좋은 패턴 — 가드 절
function process(user) {
  if (!user) return;
  if (!user.active) return;
  if (user.age < 19) return;
  if (!user.subscribed) return;
  // 실제 로직 (들여쓰기 1단)
}

예외/실패 경로를 먼저 return 으로 빠져나가면, 본문 로직이 깔끔하게 한 단으로 모입니다. 중첩이 3단을 넘어가면 이 패턴을 고려해 보세요.