조건문(if/switch) | 자바스크립트 기초

조건문 — 프로그램이 판단하는 방법

조건문은 특정 조건에 따라 실행할 코드를 분기시킵니다. 단순히 문법을 외우는 것보다, 어떤 상황에 어떤 패턴을 쓰는 것이 더 읽기 좋은가를 이해하는 것이 중요합니다.

if / else if / else

// 기본 구조
if (조건식) {
  // 조건이 true일 때
} else if (다른조건) {
  // 두 번째 조건이 true일 때
} else {
  // 모두 false일 때
}

// 실제 예시
function classify(score) {
  if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else if (score >= 70) {
    return "C";
  } else if (score >= 60) {
    return "D";
  } else {
    return "F";
  }
}

classify(85); // "B"

중괄호 생략 — 하지 마세요

// 한 줄이라도 중괄호 생략은 위험
if (isLoggedIn) doSomething(); // 괜찮아 보이지만...

// 나중에 한 줄 추가하면 버그 발생
if (isLoggedIn)
  doSomething();
  logAction(); // 이 줄은 if와 무관하게 항상 실행됨!

// 항상 중괄호를 쓰세요
if (isLoggedIn) {
  doSomething();
  logAction();
}

switch 문

하나의 값을 여러 케이스와 비교할 때 사용합니다. if/else if 체인보다 의도가 명확합니다.

const day = "Monday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("평일");
    break;
  case "Saturday":
  case "Sunday":
    console.log("주말");
    break;
  default:
    console.log("알 수 없는 요일");
}

// break를 빠뜨리면 fall-through 발생 (버그 주의!)
switch (x) {
  case 1:
    console.log("one");
    // break 없음!
  case 2:
    console.log("two"); // x가 1이어도 실행됨!
    break;
}

switch vs if/else 선택 기준

// switch가 적합: 하나의 값을 여러 고정값과 비교
switch (status) {
  case "pending": ...
  case "active": ...
  case "closed": ...
}

// if/else가 적합: 범위 비교, 복합 조건
if (score >= 90 && isBonus) { ... }
if (age > 18 || hasPermission) { ... }

조건문 리팩터링 패턴

1. 조기 반환(Early Return)으로 중첩 줄이기

// 나쁜 예: 중첩이 깊어질수록 읽기 어려움
function processOrder(user, order) {
  if (user) {
    if (user.isActive) {
      if (order) {
        if (order.amount > 0) {
          // 실제 로직
          return "처리 완료";
        }
      }
    }
  }
  return "오류";
}

// 좋은 예: 조기 반환으로 중첩 제거
function processOrder(user, order) {
  if (!user) return "유저 없음";
  if (!user.isActive) return "비활성 유저";
  if (!order) return "주문 없음";
  if (order.amount <= 0) return "금액 오류";

  // 조건 통과, 실제 로직만 남음
  return "처리 완료";
}

2. 객체 리터럴로 switch 대체

// switch 방식
function getIcon(status) {
  switch (status) {
    case "success": return "✅";
    case "error":   return "❌";
    case "warning": return "⚠️";
    default:        return "ℹ️";
  }
}

// 객체 리터럴 방식 (더 간결)
function getIcon(status) {
  const icons = {
    success: "✅",
    error:   "❌",
    warning: "⚠️",
  };
  return icons[status] ?? "ℹ️";
}

3. 삼항 연산자 올바른 사용

// 좋은 사용: 단순한 이진 선택
const label = isLoggedIn ? "로그아웃" : "로그인";
const className = isActive ? "active" : "inactive";

// 나쁜 사용: 복잡한 로직은 if/else로
// 읽기 어렵고 디버깅 힘듦
const result = a > b
  ? a > c ? a : c
  : b > c ? b : c;

// 함수로 분리하거나 if/else 사용
function maxOfThree(a, b, c) {
  if (a > b && a > c) return a;
  if (b > c) return b;
  return c;
}

Nullish 패턴 — 조건문 없이 안전하게

// 조건문 없이 null 처리
const port = config.port ?? 3000;
const name = user?.profile?.displayName ?? "익명";

// 조건문으로 쓰면
const port2 = config.port !== null && config.port !== undefined
  ? config.port
  : 3000;
// → ?? 한 줄이 훨씬 명확

실전 예시: 로그인 상태에 따른 UI 분기

function renderHeader(user) {
  // 1단계: 로그인 여부
  if (!user) {
    return renderGuestHeader();
  }

  // 2단계: 역할별 분기
  const roleActions = {
    admin: () => renderAdminHeader(user),
    manager: () => renderManagerHeader(user),
    member: () => renderMemberHeader(user),
  };

  const renderFn = roleActions[user.role];
  if (!renderFn) {
    return renderMemberHeader(user); // 알 수 없는 역할 → 기본 처리
  }

  return renderFn();
}

조건문 작성의 원칙: 중첩은 최대 2단계까지만. 그 이상이면 함수 분리나 조기 반환을 고려하세요. 조건문이 길어질수록 테스트하기도, 읽기도 어려워집니다.

관련 검색어 · 자바스크립트 조건문, if else 사용법, switch 문법, 조기 반환 패턴, 삼항 연산자 활용, 조건문 리팩터링