Enum (열거형)

Enum은 여러 상수를 하나의 이름 아래 그룹화할 수 있는 TypeScript 전용 기능이다.
여러 값에 각각 이름을 부여해, 정해진 값의 집합처럼 사용할 수 있다.
JavaScript에는 enum 문법이 없지만, TypeScript에서는 컴파일 과정에서 JavaScript 코드로 변환된다.

1. 기본 문법

기본적으로 숫자형 Enum은 첫 번째 값이 0부터 시작해 순차적으로 증가한다.

enum 이름 {
  상수1, // 0
  상수2, // 1
  상수3, // 2
}

Enum의 값은 꼭 0부터 시작할 필요가 없고, 임의의 숫자나 문자열로 시작할 수 있다.

enum Status {
  Success = 200,
  NotFound = 404,
  ServerError = 500,
}

2. 숫자형

값을 지정하지 않으면 자동으로 0부터 시작한다.

enum PlayerState {
  Buffering,
  Playing,
  Paused,
  Seeking,
}

let currentState: PlayerState = PlayerState.Playing;

currentState = 'Playing'; // Error

// 메서드 생성
const isPlaying = (state: PlayerState) => {
  return state === PlayerState.Playing;
};

isPlaying(currentState); // true

역방향 매핑 (Reverse Mapping)

숫자형 Enum은 값으로 이름을 찾는 것도 가능하다. 문자열 Enum에는 없는 특징이다.

enum PlayerState {
  Buffering,
  Playing,
  Paused,
}

console.log(PlayerState.Playing); // 1
console.log(PlayerState[1]); // "Playing"

3. 문자열형

문자열 enum은 모든 값을 직접 초기화해야 한다.

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

let direction: Direction = Direction.Up;

console.log(direction); // UP

• 문자열 Enum은 디버깅 시 값이 그대로 보이기 때문에 더 직관적이다.

예시: switch 문

Enum은 조건문에서 특히 가독성이 좋다.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

function move(direction: Direction) {
  switch (direction) {
    case Direction.Up:
      console.log('Moving up!');
      break;
    case Direction.Down:
      console.log('Moving down!');
      break;
    case Direction.Left:
      console.log('Moving left!');
      break;
    case Direction.Right:
      console.log('Moving right!');
      break;
  }
}

move(Direction.Up); // Moving up!

4. const enum (최적화 용도)

const enum은 컴파일 시점에 값으로 치환된다.

const enum Direction {
  Up,
  Down,
}

let d = Direction.Up;
// JavaScript로 컴파일되면 대략 아래처럼 변환된다.
// let d = 0;

다만 const enum은 Babel, SWC, isolatedModules 같은 환경에서 제약이 있을 수 있어 프로젝트 설정에 따라 사용에 주의가 필요하다.

5. Enum vs Union Type

Enum도 사용할 수 있지만, 단순한 문자열 값의 집합은 union literal type으로 표현하기도 한다.

// Enum
enum DirectionEnum {
  Up = 'UP',
  Down = 'DOWN',
}

// Union Literal Type
type DirectionUnion = 'UP' | 'DOWN';

정리

👩🏻‍💻 요약

• Enum은 상수 집합을 그룹화할 수 있는 타입스크립트 전용 기능
• 숫자형 Enum → 자동 증가, 역방향 매핑 가능
• 문자열 Enum → 값 직접 지정, 직관적
• const enum → 성능 최적화, 하지만 요즘은 덜 쓰임