[TypeScript] enum vs. const

 

1. 들어가며

이 포스팅에서는 타입스크립트에서 enum이란 무엇이고, 런타임 동작 시에 어떻게 동작하는지, 왜 const enum을 쓰는 것이 더 좋은지 알아보도록 할 것입니다. 또, 일반적인 enum과 const enum의 차이점과 컴파일 후 각각이 코드에 어떤 영향을 미치는지에 대해서도 다룰 것입니다.

 

2. Enum 이란?

Enum은 자바스크립트의 확장 type-level이 아닌 TypeScript의 몇 안 되는 기능 중에 하나입니다.
- 공식 TS 문서

 

enum은 enumeration(열거형)의 줄임말로, 명명된 상수 집합을 정의할 수 있게 해줍니다. 여기서 말하는 상수는 애플리케이션에서 보통 '고유한 값'을 나타내기 위해 사용하는데요. 예를 들어, 'on', 'off' 기능이 있는 스위치 버튼의 경우 enum을 사용하여 이러한 상태를 나타내는 것이 가능합니다. 

 

enum이 TypeScript에서 어떻게 사용되는지 보도록 하겠습니다.

enum Switch {
    ON, 
    OFF
}

 

이 enum은 타입스크립트의 다른 타입들과 마찬가지로 사용하면 됩니다.

 

3. 런타임에서 Enum의 동작

일반 enum과 const enum의 차이를 이해하기 위해, 먼저 타입스크립트가 코드를 자바스크립트로 컴파일한 후에 어떤 일이 발생하는지를 살펴봐야 합니다.

 

일반 enum

 

타입스크립트는 일반 enum을 컴파일할 때 이를 객체로 변환합니다. 다음은 예시입니다.

 

타입스크립트:

enum Switch {
    ON, 
    OFF
}

 

자바스크립트: 

var Swtich;
(function (Switch) {
	Switch[Switch["ON"] = 0] = "ON";
    Switch[Switch["OFF"] = 1] = "OFF";
}) (Switch || (Switch = {}));

 

이 예제에서, Switch.On은 0이되고 Switch.Off는 디폴트 값으로 1이 됩니다. 만약 다른 값으로 설정되기 원한다면 명시해줄 수도 있습니다.

 

enum Switch {
    ON = 100,
    OFF
}

var Swtich;
(function (Switch) {
	Switch[Switch["ON"] = 100] = "ON";
    Switch[Switch["OFF"] = 101] = "OFF";
}) (Switch || (Switch = {}));

 

이제 Switch.On은 100, Switch.Off는 101입니다.

 

 

4.문자열 enum(string enum)과 계산된 enum(computed enum)

만약 enum의 값으로 문자열을 사용하고 싶다면 아래와 같이 정의할 수 있습니다.

enum Switch {
    ON, 
    OFF
}

 

var Swtich;
(function (Switch) {
	Switch["ON"] = "ON";
    Switch["OFF"] = "OFF";
}) (Switch || (Switch = {}));

 

enum 값에 표현식을 사용할 수도 있습니다.

 

enum Switch {
  On = "ON",
  Off = "OFF",
  OnOff = On + Off,
}

 

5. const enum이 무엇인지

const enum은 일반 enum과 비슷하지만 중요한 차이점이 있는데, 바로 const 키워드를 사용한다는 점입니다.

 

const enum Switch {
  ON = "ON"
  OFF = "OFF"
}

 

const enum의 가장 큰 장점은 추가 생성되지 않는다는 점입니다. 대신 해당 값이 자바스크립트 코드에 직접 인라인 처리됩니다. 즉, 컴파일 도중에는 추가 객체가 생성되지 않기 때문에 생성되는 코드 자체의 양이 줄어즙니다.

 

다음은 컴파일 후의 Const enum의 예제의 모습입니다.

 

var status = /* Switch.On */

 

보면 알 수 있겠지만 Switch 객체가 존재하지 않으며, 값이 직접적으

 

7. 왜 const enum을 사용하는가?

const enum은 일반 enum이 만들어내는 부가적인 코드를 피하고 싶을 때 유용합니다. 특히 대규모 프로젝트에서 자바스크립트 코드를 더 작게 유지하고 빌드 및 해석 시간을 개선하는 데 도움이 될 수 있습니다.

 

8. 결론

일반 Enum은 컴파일된 자바스크립트에서 객체를 생성하는 반면, Const enum은 값을 직접 인라인 하여 보다 효율적인 코드를 생성할 수 있습니다.