[TypeScript] 이넘(enum)

1. enum의 기본 개념

enum이란? 고정된 값들의 집합을 정의할 때 사용되는 타입

ex) 성별(Gender)처럼 제한된 선택지가 있는 경우 유용

사용목적

• 코드 가독성 향상 및 오류 방지
• 값의 '열거'에 중점

특징

• 타입스크립트에서만 제공되는 타입으로, 숫자 또는 문자열 값들을 열거
• 코드에서 실수를 줄이고, 가독성을 높임

---

2. 숫자 열거형

특징: 각 항목에 숫자 값을 자동으로 할당

초기값이 없을 경우, 0부터 시작해 1씩 증가

enum Direction {
  UP, // 0
  DOWN, // 1
  LEFT, // 2
  RIGHT, // 3
}

console.log(Direction.UP); // 0
console.log(Direction.DOWN); // 1
console.log(Direction.LEFT); // 2
console.log(Direction.RIGHT); // 3

💡 실행 결과:0, 1, 2, 3 출력. 숫자가 자동으로 할당되어 초기값 지정 불필요

숫자형 enum의 초기값 지정

숫자형 enum에서 특정 항목에 초기값을 지정하면, 이후 항목의 값도 자동으로 1씩 증가

enum Direction {
  UP,
  DOWN = 20,
  LEFT, // 21
  RIGHT, // 22
}

console.log(Direction.DOWN); // 20
console.log(Direction.LEFT); // 21
console.log(Direction.RIGHT); // 22

💡 실행 결과:DOWN은 20, 이후 값은 1씩 증가한 21, 22 출력

---

3. 문자열 열거형

문자열형 enum은 각 항목에 직접적인 문자열 값을 할당

⇒ 값의 의미를 더 직관적으로 표현 가능

enum Direction {
  UP = "UP",
  DOWN = "DOWN",
  LEFT = "LEFT",
  RIGHT = "RIGHT",
}

console.log(Direction.UP); // "UP"
console.log(Direction.DOWN); // "DOWN"
console.log(Direction.LEFT); // "LEFT"
console.log(Direction.RIGHT); // "RIGHT"

💡 실행 결과:"UP", "DOWN", "LEFT", "RIGHT" 출력. 문자열 값은 의미가 명확하고 출력이 직관적이어서 선호되는 경우가 많음

---

4. enum 사용 이유

enum은 개발자가 제한된 선택지를 제공하여 실수 방지와 코드 안정성 향상에 유용함

실수 가능성이 있는 코드 예시

아래 코드는 문자열을 직접 전달하여 오타나 잘못된 값으로 인한 오류 발생 가능성 존재

function move(direction: string) {
  switch (direction) {
    case "UP":
      console.log("위로 한 칸 이동");
      break;
    case "DOWN":
      console.log("아래로 한 칸 이동");
      break;
    case "LEFT":
      console.log("왼쪽으로 한 칸 이동");
      break;
    case "RIGHT":
      console.log("오른쪽으로 한 칸 이동");
      break;
    default:
      console.log("해당 값이 없음");
  }
}

move("up"); // 실수로 소문자 사용 시 동작하지 않음

enum 사용한 개선된 코드

enum 사용 시 미리 정의된 값만 사용 가능하여 실수 감소

enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

function move2(direction: Direction) {
  switch (direction) {
    case Direction.UP:
      console.log("위로 한 칸 이동");
      break;
    case Direction.DOWN:
      console.log("아래로 한 칸 이동");
      break;
    case Direction.LEFT:
      console.log("왼쪽으로 한 칸 이동");
      break;
    case Direction.RIGHT:
      console.log("오른쪽으로 한 칸 이동");
      break;
  }
}

move2(Direction.UP); // 위로 한 칸 이동

💡 실행 결과: "위로 한 칸 이동" 출력. 사용자가 제공하는 값이 열거형에 의해 제한되어 실수 방지 가능

---

4. 선언 병합 (Declaration Merging)

문자열형 enum은 값이 중복되지 않는 경우 여러 선언 병합 가능

enum Gender {
  Male = "Male",
}
enum Gender {
  Female = "Female",
}

console.log(Gender.Male); // "Male"
console.log(Gender.Female); // "Female"

💡 실행 결과: "Male", "Female" 출력

4.1 숫자형 enum의 병합 불가

숫자형 enum은 값이 자동으로 0부터 시작하여 중복된 값이 발생하여 병합 불가

---

5. 활용 예제

enum은 특정 값 집합을 반복적으로 사용하는 경우 유용. 아래는 성별(Gender)을 나타내는 예제

enum Gender {
  Male = "Male",
  Female = "Female",
}

type User = {
  name: string;
  gender: Gender;
};

const user: User = {
  name: "Alice",
  gender: Gender.Male, // 미리 정의된 값만 사용 가능
};

console.log(user.gender); // "Male"

💡 실행 결과: "Male" 출력. 성별 값이 제한되어 잘못된 값 사용 실수 방지 가능

---

6. enum vs 리터럴 타입

강사님의 선호: enum보다 리터럴 타입

• 단, 같은 값이 여러 번 다른 타입으로 지정되어야 하는 경우에는 enum이 더 유용할 수 있음
• enum 대신 리터럴 타입을 사용한 예시:

type User = {
  name: string;
  gender: "male" | "female";
};

// 객체 정의 시 실수 방지
const user: User = {
  name: "Alice",
  gender: "male",
};

---

7. enum의 특징

enum Test {
  hi,
}
 //키값 추적하기
console.log(Test[0]); // "hi"

---

8. const enum

TypeScript 플레이그라운드: 브라우저에서 TypeScript 코드 작성 및 실행 가능한 온라인 도구. 설치 없이 코드 작성 및 JavaScript 변환 실시간 확인 가능

enum 단점

컴파일 시 사진처럼 코드가 길어짐

무분별한 enum 사용은 컴파일된 코드의 길이를 증가시킴

✅ 코드 흔적을 남기지 않는 방법

enum 앞에 const를 붙임

실무에서는 주로 이런 const enum을 사용함

const 여부에 따른 컴파일 결과물 차이

• 일반 enum: 컴파일 시 JavaScript 객체로 변환되어 런타임에도 존재함
• const enum: 컴파일 시 해당 값으로 인라인 대체되어 런타임에 객체가 생성되지 않음

출처: 수코딩