[TS] Enums

✅Enums - 열거형

Enums은 Typescript에서 제공되는 몇 안 되는 자바스크립트의 타입 레벨이 아닌 확장이다. Enums는 명명된 상수 집합을 정의할 수 있으며 숫자형 또는 문자형 기반의 열거형을 제공해 준다.

 

🤔 주로 어떤 때에 사용될까?

첫 번째 예시

전자 상거래 사이트에서 주문을 할 경우, 아래 코드처럼  '대기 중, 발송됨, 배송 완료'라는 세 가지 상태가 있다. 

// TS를 사용하지 않을 경우
const PENDING = 0;
const SHIPPED = 1;
const DELIVERED = 2;

if(status === DELIVERED) {
  // do something...
  } else

중요한 것은 숫자 2가 아닌 DELIVERED라는 명명된 상수를 사용하여 의미를 명확하게 하고 싶다는 것이다. 상수로서 비교되고 재사용된다. 

 

두 번째 예시

사용자 권한을 관리자=0, 회원=1, 게스트=2로 관리할 경우

if(userType !==0) {
  alert('관리자 권한 없음.');
}

관리자 여부를 상수가 아닌 숫자로 구분하면 알아채기 힘들고, 회원 타입의 종류가 많아지면 실수가 발생하기 쉽다. enum을 사용해 사용자 권한 분야만 따로 모아서 정의(열거)해주고, 의미를 명확하게 구분할 수 있다. 실수를 줄이고 가독성을 높일 수 있다. 

 

세 번째 예시

게시물의 종류를 관리할 때도 공지사항, 자유게시판, 방명록 등 종류를 모아 정의하여 사용할 수 있다.

 

👉 기본 개념

enum OrderStatus {
  PENDING,
  SHIPPED,
  DELIVERED = 5,
  RETURNED,
}

console.log(OrderStatus.PENDING); // 0
console.log(OrderStatus.SHIPPED); // 1
console.log(OrderStatus.DELIVERED); // 5
console.log(OrderStatus.RETURNED); // 6

const myStatus = OrderStatus.DELIVERED;

function isDelevered(status: OrderStatus) {
  return status === OrderStatus.DELIVERED;
}

isDelevered(OrderStatus.RETURNED);

기본적으로 enum은 값이 주어지지 않을 경우 0부터 하나씩 증가하여 값을 할당한다. 이를 통해 서로 다른 값을 나타내 줄 수 있다. 다양한 타입이 섞인 enum도 허용된다. 하지만 대부분 같은 타입을 사용한다. 

 

 🟢 Numeric enums - 숫자 열거형

위에서 언급했듯이 값이 자동으로 증가하는 동작을 한다. 

enum UserResponse {
  No = 0,
  Yes = 1,
}
 
function respond(recipient: string, message: UserResponse): void {
  // ...
}
 
respond("Princess Caroline", UserResponse.Yes);

숫자 열거형은 Computed and constant members(계산된 멤버와 상수 멤버)에 혼합될 수 있다.

 

상수 멤버로 간주하는 경우

1. 열거형의 첫 번째 멤버가 이니셜라이저(초기화)가 없는 경우, 상수 0으로 취급.
2. 열거형의 멤버가 이니셜라이저가 없고 이전 멤버가 숫자형 상수인 경우, 이전 멤버의 값 +1인 상수 취급.
3. 열거형의 멤버가 상수 열거형 표현식인 경우. 열거형 멤버는 상수 열거형 식으로 초기화된다.

상수 멤버가 아닌 멤버는 모두 계산된 멤버로 간주한다.

 🟢 String enums - 문자열 열거형

문자열 열거형에서 각 멤버는 문자열 리터널 또는 다른 문자열 열거형 멤버로 상수를 초기화해야 한다.

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

 

문자열 열거형을 사용하면 멤버 자체의 이름과 관계없이 코드가 실행될 때 의미 있고 읽을 수 있는 값을 제공할 수 있다.

 

🤔 Enum이 무엇으로 컴파일되는가?

TS로 작성된 코드들이 JS로 컴파일될 때 대부분 제거되는 것과 달리 Enum은 실제로 JS에 영향을 미친다.

 앞서 작성한 코드를 JS로 변환하였을 때 새로운 코드가 만들어졌다. 많은 이들이 기존의 JS코드를 변형시키고 복잡한 코드를 원하지 않기에 다른 옵션을 사용한다. 

enum앞에 const를 붙인다. 여기서 붙은 const는 변수를 생성하는 키워드가 아닌 결과로 나온 JS로부터 OrderStatus enum의 존재 자체를 모두 삭제해 버리고, OrderStatus로부터 참조된 모든 값을 지정된 값으로 대체한다. 이런 방식은 실제 js 코드를 변경하거나 새로운 객체를 추가하는 건 아니니 어느 정도의 타협점이라고 할 수 있다. 하지만 enum에 대한 논쟁은 존재한다. 공식 문서를 살펴보면 위 방식 또한 확실한 정답이 아니라는 것을 알 수 있다. 정확하게 파악하고 용도와 의도에 적절하게 사용하는 것이 중요한 것 같다.