[TypeScript] 열거형(enum)

열거형(Enum)

열거형(enum)은 타입스크립트에서 특정 값들의 집합에 이름을 부여해 가독성과 유지보수성을 높이는 데 사용한다. 일반적으로 상수들의 묶음을 정의할 때 유용하다.

왜 열거형을 사용할까?

• 숫자나 문자열 값들에 의미있는 이름을 붙여 가독성을 높임
• 상수값들을 일관되게 관리하기 위해서

---

1. 숫자 열거형

숫자 열거형은 기본적으로 값이 0부터 시작하며, 값이 자동으로 1씩 증가한다.

enum Direction {
  Up,       // 0
  Down,     // 1
  Left,     // 2
  Right     // 3
}

console.log(Direction.Up);    // 출력: 0
console.log(Direction.Right); // 출력: 3

→ 값을 명시하지 않으면, 0부터 시작해 1씩 자동 증가한다.

enum Direction {
	Up = 1,
	Down,
	Left = 5,
	Right
}

console.log(Direction.Down); // 출력: 2
console.log(Direction.Right); // 출력: 6

→ 물론 명시적으로 값을 지정하는 것도 가능하다.

---

2. 문자열 열거형

문자열 열거형은 각 열거형 멤버에 명시적으로 문자열 값을 지정한다. 숫자와 달리, 자동 증가 기능이 없으므로 값은 항상 명시적으로 설정해야 한다.

enum Status {
  Success = "SUCCESS",
  Failure = "FAILURE",
  Pending = "PENDING"
}

console.log(Status.Success); // 출력: "SUCCESS"
console.log(Status.Failure); // 출력: "FAILURE"

---

3. 혼합 열거형

숫자형과 문자열을 혼합하여 사용할 수도 있지만, 자주 사용되는 문법은 아니다.

enum MixedEnum {
No = 0,
Yes = "YES",
}
console.log(MixedEnum.No); // 출력: 0
console.log(MixedEnum.Yes); // 출력: "YES"

---

4. 열거형의 특징

4.1 역방향 매핑(숫자 열거형만 가능)

숫자 열거형은 값에서 이름으로도 접근이 가능하다.

enum Color {
  Red = 1,  // 명시적으로 1로 시작
  Green,    // 이전 값(1) + 1 → 2
  Blue      // 이전 값(2) + 1 → 3
}

console.log(Color.Green);    // 출력: 2
console.log(Color[2]);       // 출력: "Green"

4.2 객체처럼 사용 가능

열거형은 내부적으로는 객체로 변환되므로, 반복문 등에서 사용할 수 있다.

enum Days {
  Monday,
  Tuesday,
  Wednesday
}

for (const day in Days) {
	console.log(day); //출력: Monday, Tuesday, Wednesday, 0, 1, 2
}

숫자 열거형은 양방향 매핑을 생성한다. 즉, 열거형은 이름 → 값 매핑뿐만 아니라 값 → 이름 매핑도 포함한다.

enum Days {
  Monday,    // 0
  Tuesday,   // 1
  Wednesday  // 2
}

위 코드를 컴파일 하면, 아래와 같은 객체로 변환된다.

{
  0: "Monday",
  1: "Tuesday",
  2: "Wednesday",
  Monday: 0,
  Tuesday: 1,
  Wednesday: 2
}

이렇게 양방향 매핑이 생성되기 때문에, 열거형은 키로도, 값으로도 접근이 가능하다.

for...in은 이 객체의 **모든 키(문자열과 숫자)**를 순회한다.

즉, 출력 순서는

1. "Monday", "Tuesday", "Wednesday" (이름 → 값 매핑의 키들)
2. "0", "1", "2" (값 → 이름 매핑의 키들)

만약, 열거형의 이름만 출력하려면 (숫자키를 제외한)

for (const day of Object.keys(Days)) {
	if(isNaN(Number(day))) {
		console.log(day);
	}
}

→ Object.keys()를 활용하고 isNaN으로 숫자를 필터링!

---

5. const enum

** 참고 **

• 컴파일 : TS 코드를 작성한 후, JS로 변환하는 과정 ⇒ 프로그램 실행 전
• 런타임 : 컴파일된 프로그램이 실제로 실행되는 단계

1. 일반 enum

enum Colors {
  RED = "#ff0000",
  GREEN = "#00ff00",
  BLUE = "#0000ff",
}

console.log(Colors.BLUE); // "#0000ff"

컴파일 결과 (JavaScript)

"use strict";
var Colors; // 객체 생성
(function (Colors) {
  Colors["RED"] = "#ff0000";
  Colors["GREEN"] = "#00ff00";
  Colors["BLUE"] = "#0000ff";
})(Colors || (Colors = {}));

console.log(Colors.BLUE); // "#0000ff"

• 타입스크립트는 일반 enum을 런타임에 사용할 수 있도록 Colors 객체를 생성한다.
• Colors는 다음과 같은 객체로 정의된다.
• { RED: "#ff0000", GREEN: "#00ff00", BLUE: "#0000ff" }
• console.log(Colors.BLUE)는 객체에서 값을 읽어오는 방식으로 동작한다.

특징

1. 런타임에 Colors라는 객체가 생성된다. ⇒ 런타임 시점에 객체가 생성되고 메모리에 올라간다.
2. 역방향 매핑(숫자 열거형에서만 가능) 및 동적 처리가 가능하다.
3. 약간의 런타임 오버헤드(객체 생성 및 참조)가 발생한다.

---

2. const enum

const enum ConstColors {
  RED = "#ff0000",
  GREEN = "#00ff00",
  BLUE = "#0000ff",
}

console.log(ConstColors.BLUE); // "#0000ff"

컴파일 결과 (JavaScript)

"use strict";
console.log("#0000ff" /* ConstColors.BLUE */);

• const enum은 컴파일 시점에 최적화.
• 타입스크립트는 열거형 객체를 생성하지 않고, 열거형 값 자체를 인라인으로 삽입.
• 따라서 ConstColors.BLUE는 컴파일된 코드에서 직접 "#0000ff"로 대체된다.

특징

1. 런타임 객체 생성 없음: ConstColors라는 객체는 런타임에 존재하지 않는다.
2. 최적화된 성능: 코드 크기가 줄어들고, 참조를 제거해 성능이 향상된다.
3. 제한사항:
   • 동적 참조 불가: 예를 들어, const enum을 사용해 Object.keys(ConstColors) 같은 동적 접근은 불가능하다.
   • 역방향 매핑은 지원하지 않는다.

 

일반 enum vs const enum

	일반 enum	const enum
런타임 객체 생성	있음 (런타임에 열거형 객체 생성)	없음 (컴파일 시 값이 인라인으로 삽입됨)
컴파일 결과 크기	크다 (양방향 매핑 코드 포함)	작다 (필요한 값만 삽입)
역참조 가능 여부	가능 (숫자 → 이름 변환 등)	불가능 (숫자 → 이름 변환 불가)
동적 사용 가능 여부	가능 (런타임에 동적으로 열거형 조작 가능)	불가능 (컴파일 시점에 값이 고정됨)
사용 목적	런타임 동작이 필요한 경우 (역참조 등)	성능 최적화와 간결한 코드가 필요한 경우