조건에 따라 다르게 실행하기: if · 삼항 · switch

01. if와 else

if (조건) { … }는 조건이 참일 때만 중괄호 안을 실행해요. 조건이 거짓일 때 할 일은 else에, 경우가 여럿이면 else if를 이어 붙여요. 조건 자리의 값은 불리언으로 바뀌어 판단돼요(참 같은 값, 거짓 같은 값).

const amount = 42000;
let shipping;

if (amount >= 50000) {
  shipping = 0;
} else if (amount >= 30000) {
  shipping = 1500;
} else {
  shipping = 3000;
}

console.log(shipping); // 1500

else if 사슬은 위에서부터 차례로 확인하다가 처음 참이 된 곳 하나만 실행하고 나머지는 건너뛰어요. 그래서 조건의 순서가 결과를 바꿔요. 범위를 나눌 때는 가장 좁은(까다로운) 조건을 먼저 둬요.

중괄호 안이 한 줄이면 중괄호를 빼도 문법상 괜찮아요. 하지만 나중에 줄을 더하다가 실수하기 쉬워서 중괄호는 늘 쓰는 것이 팀 규칙인 경우가 많아요.

02. 값을 고를 때는 삼항 연산자

조건에 따라 두 값 중 하나를 고르기만 할 때는 조건 ? 참일 때 값 : 거짓일 때 값을 써요. if로 쓰면 변수를 먼저 만들고 두 갈래에서 각각 넣어야 하지만, 삼항 연산자는 한 줄로 바로 const에 담을 수 있어요.

const stock = 0;
const label = stock > 0 ? '구매하기' : '품절';
console.log(label); // 품절

const isMember = true;
const price = 10000;
const pay = isMember ? price * 0.9 : price;
console.log(pay); // 9000

삼항 연산자를 여러 겹 겹치면(a ? b : c ? d : e) 읽기가 급격히 어려워져요. 갈래가 셋 이상이면 if나 아래의 객체 표를 써요. 값을 고르는 게 아니라 서로 다른 일을 실행하는 거라면 그것도 if가 맞아요.

03. 값 하나를 여러 경우와 비교: switch

변수 하나를 여러 값과 비교할 때는 switch를 쓸 수 있어요. 비교는 ===로 해요. case에 맞으면 그 아래를 실행하고, break를 만나면 switch를 빠져나가요. 여러 case를 붙여 쓰면 같은 일을 하게 묶을 수 있어요.

const status = 'delivering';

switch (status) {
  case 'paid':
    console.log('결제 완료');
    break;
  case 'shipping':
  case 'delivering':
    console.log('배송 중');
    break;
  default:
    console.log('알 수 없는 상태');
}

break를 빼먹으면 맞은 case 아래에 있는 다른 case까지 줄줄이 실행돼요. 의도한 게 아니라면 버그예요.

const level = 2;

switch (level) {
  case 1:
    console.log('브론즈 혜택');
  case 2:
    console.log('실버 혜택');
  case 3:
    console.log('골드 혜택');
}

switch 대신 객체 표

"이 값이면 이 글자"처럼 값을 다른 값으로 바꾸기만 하는 switch는 객체 하나로 줄일 수 있어요. 경우가 늘어나도 표에 한 줄만 더하면 되고, 표를 다른 파일로 옮기거나 서버에서 받아 쓰기도 쉬워요. 객체는 4장에서 자세히 다뤄요.

const STATUS_LABEL = {
  paid: '결제 완료',
  shipping: '배송 중',
  delivering: '배송 중',
  delivered: '배송 완료',
};

console.log(STATUS_LABEL['delivered']); // 배송 완료
console.log(STATUS_LABEL['refunded']);  // undefined — 표에 없는 값

표에 없는 값은 undefined가 나와요. 이럴 때 "알 수 없는 상태" 같은 기본값을 붙이는 방법은 다음 글에서 다뤄요.

04. 중첩을 줄이는 early return

if 안에 if가 겹겹이 들어가면 어느 else가 어느 조건의 것인지 읽기 어려워져요. 함수 안이라면, 안 되는 경우를 먼저 걸러 내고 바로 return하는 방법(early return, 또는 가드 절)으로 중첩을 없앨 수 있어요. 함수는 함수 글에서 자세히 다뤄요.

// 중첩된 모양
function checkout(cart, user) {
  if (user) {
    if (cart.length > 0) {
      return '결제를 시작해요';
    } else {
      return '장바구니가 비어 있어요';
    }
  } else {
    return '로그인이 필요해요';
  }
}

// 안 되는 경우를 먼저 걸러 낸 모양
function checkout(cart, user) {
  if (!user) return '로그인이 필요해요';
  if (cart.length === 0) return '장바구니가 비어 있어요';
  return '결제를 시작해요';
}

console.log(checkout(['연필'], null));
console.log(checkout([], { name: '하늘' }));
console.log(checkout(['연필'], { name: '하늘' }));

두 함수는 똑같이 동작하지만, 아래쪽은 위에서부터 한 줄씩 "이건 안 되고, 이것도 안 되고, 다 통과하면 진행"으로 읽혀요. 함수의 본래 일(결제 시작)이 맨 아래 들여쓰기 없이 남는 것도 장점이에요.

const points = 12000;
let grade;

if (points >= 3000) {
  grade = '실버';
} else if (points >= 10000) {
  grade = '골드';
} else {
  grade = '일반';
}

console.log(grade);

if (points >= 10000) {
  grade = '골드';
} else if (points >= 3000) {
  grade = '실버';
} else {
  grade = '일반';
}

05. 실전 포인트

• 언제 쓰나요? 서로 다른 일을 실행하면 if, 두 값 중 하나를 고르면 삼항 연산자, 값을 다른 값으로 바꾸기만 하면 객체 표를 써요. 함수 안에서는 early return으로 예외 상황을 먼저 걸러요.
• 대신 쓰는 것: switch는 경우마다 하는 일이 제법 다를 때만 써요. 단순 변환이면 객체 표가 짧고 안전해요(break 빠뜨릴 일이 없어요). 겹친 삼항 연산자는 if로 풀어요.
• 흔한 실수: 넓은 조건을 먼저 둬서 아래 조건이 영영 실행되지 않는 것, switch의 break 빠뜨림, 그리고 if (count)처럼 0이나 빈 문자열을 "없음"으로 판단하는 것이에요.