Nested Ternary → Early Returns

#3ReadabilityEasy

Nested Ternary → Early Returns

Nested Ternary — 일찍 반환하기

중첩된 삼항 연산자는 "한 줄 안에 모든 분기"를 우겨넣어서, 읽는 사람이 괄호 계층을 머릿속에 그려야 합니다. early return 또는 if/switch로 풀면 각 분기가 독립적인 한 줄이 됩니다.

할 일

getStatusMessage 의 중첩 삼항을 early return 으로 분해
UserBadge 의 className/text 분기도 변수 추출 또는 if 로 분해
동작은 그대로 유지

좋은 fix

early return: if (status === 'loading') return 'Loading...'
lookup 객체: const className = { gold, silver, none }[tier]
별도 함수로 추출

안 되는 fix

삼항을 그대로 두고 주석만 추가
더 많은 줄바꿈으로 "보기 좋게" 만 하는 것 (구조는 그대로)

// TODO: 중첩 삼항을 early return / if-else / lookup 으로 풀어내세요.
//       동작은 유지해야 합니다.

export function getStatusMessage(status: string, count: number, isAdmin: boolean): string {
  return status === 'loading'
    ? 'Loading...'
    : status === 'error'
    ? 'An error occurred'
    : count === 0
    ? 'No items found'
    : count === 1
    ? 'Found 1 item'
    : isAdmin
    ? `Found ${count} items (admin view)`
    : `Found ${count} items`;
}

export interface User {
  isVerified: boolean;
  isPremium: boolean;
  name: string;
}

export function UserBadge({ user }: { user: User }) {
  return (
    <span
      data-testid="badge"
      className={user.isVerified ? (user.isPremium ? 'gold' : 'silver') : 'none'}
    >
      {user.isVerified ? (user.isPremium ? '⭐ Premium' : '✓ Verified') : 'Unverified'}
    </span>
  );
}

Open Sandbox

Sandpack 로드 중…

// TODO: 중첩 삼항을 early return / if-else / lookup 으로 풀어내세요.
//       동작은 유지해야 합니다.

export function getStatusMessage(status: string, count: number, isAdmin: boolean): string {
  return status === 'loading'
    ? 'Loading...'
    : status === 'error'
    ? 'An error occurred'
    : count === 0
    ? 'No items found'
    : count === 1
    ? 'Found 1 item'
    : isAdmin
    ? `Found ${count} items (admin view)`
    : `Found ${count} items`;
}

export interface User {
  isVerified: boolean;
  isPremium: boolean;
  name: string;
}

export function UserBadge({ user }: { user: User }) {
  return (
    <span
      data-testid="badge"
      className={user.isVerified ? (user.isPremium ? 'gold' : 'silver') : 'none'}
    >
      {user.isVerified ? (user.isPremium ? '⭐ Premium' : '✓ Verified') : 'Unverified'}
    </span>
  );
}

Open Sandbox