Magic Numbers → Named Constants

#1ReadabilityEasy

Magic Numbers → Named Constants

Magic Numbers — 의미 있는 이름으로

다음 코드는 동작은 맞지만 숫자들이 무엇을 의미하는지 가 코드만 봐서는 알 수 없습니다. 0.8, 100, 8, 20 같은 숫자들이 매직 넘버 — 읽는 사람이 비즈니스 규칙을 추측해야 합니다.

할 일

의미 있는 이름의 상수로 추출 (예: BULK_DISCOUNT_RATE, MIN_PASSWORD_LENGTH, PAGE_SIZE)
동작은 그대로 유지 — 기존 테스트 모두 통과해야 함
상수는 모듈 최상위에 선언 (const NAME = value)

좋은 fix

의미를 드러내는 상수명 (BULK_DISCOUNT_RATE, TIER1_QUANTITY_THRESHOLD 같이)
도메인 용어를 반영 (할인 정책이면 Discount, 비밀번호 정책이면 Password)

안 되는 fix

숫자 옆에 주석 추가 (0.8 // 20% discount) — 코드 자체가 자기 설명적이어야 함
MAGIC_080 같이 값만 따라가는 이름 — 의미를 안 담음
과도한 추상화 (할인 전략 패턴 등) — 작은 코드엔 오버킬

학습 포인트

자기 설명적 이름: 코드는 읽히기 위해 쓰임. 상수명은 의도를 전달하는 가장 싼 방법
매직 넘버는 변경 시 누락이 잘 일어남 (같은 값이 여러 곳에 있으면 한 군데만 바꾸기 쉬움)

// TODO: 매직 넘버들을 의미 있는 상수로 추출하세요.
//       동작은 그대로 유지해야 합니다 (테스트 통과).

export function calculateDiscount(price: number, quantity: number) {
  if (quantity >= 100) {
    return price * 0.8;
  } else if (quantity >= 50) {
    return price * 0.9;
  } else if (quantity >= 10) {
    return price * 0.95;
  }
  return price;
}

export function validatePassword(password: string): boolean {
  return password.length >= 8 && password.length <= 128;
}

export function Pagination({ total }: { total: number }) {
  const pages = Math.ceil(total / 20);
  return (
    <div data-testid="pagination" style={{ marginTop: 16, padding: 24 }}>
      {Array.from({ length: pages }, (_, i) => (
        <button key={i}>{i + 1}</button>
      ))}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

// TODO: 매직 넘버들을 의미 있는 상수로 추출하세요.
//       동작은 그대로 유지해야 합니다 (테스트 통과).

export function calculateDiscount(price: number, quantity: number) {
  if (quantity >= 100) {
    return price * 0.8;
  } else if (quantity >= 50) {
    return price * 0.9;
  } else if (quantity >= 10) {
    return price * 0.95;
  }
  return price;
}

export function validatePassword(password: string): boolean {
  return password.length >= 8 && password.length <= 128;
}

export function Pagination({ total }: { total: number }) {
  const pages = Math.ceil(total / 20);
  return (
    <div data-testid="pagination" style={{ marginTop: 16, padding: 24 }}>
      {Array.from({ length: pages }, (_, i) => (
        <button key={i}>{i + 1}</button>
      ))}
    </div>
  );
}

Open Sandbox