ENUM의 컴파일 결과 분석해보기

타입스크립트에서 enum이 타입만을 위한 것이 아니라 값으로 사용할 수 있으며, 실제로 런타임에도 존재하는 값이라고 하여 컴파일된 자바스크립트 코드에서는 어떻게 보일지 궁금하고 또 양방향 맵핑이라는 것을 어떻게 구현했는지도 궁금해서 컴파일된 결과를 한번 들여다보았습니다.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

"use strict";
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

---

코드 분석

1. var Direction;

var Direction;

 

Direction이라는 변수를 선언하는 부분. 이 변수는 enum의 값들을 담는 객체가 됨.

 

 

2. function (Direction) { ... } (Direction || (Direction = {}));

(function (Direction) { ... })(Direction || (Direction = {}));

 

즉시실행함수 실행 및 Direction 변수 초기화 (이미 선언되어 있으면 그 값을 사용, 그렇지 않으면 빈 객체로 초기화)

 

3. 함수 내부 동작

Direction[Direction["Up"] = 0] = "Up";

• Direction["Up"] = 0 : Direction 객체에 "Up"이라는 이름으로 0을 할당
• Direction[0] = "Up" : 동시에 0이라는 키에 "Up"이라는 문자열도 할당. 이렇게 해서 양방향 매핑을 만들게 됨.
• 0 값을 어떻게 넘겨주었을까? : 객체에 특정 키로 특정 값을 할당하는 경우, 그 할당된 값이 반환됨

const obj = {};
console.log(obj["key"] = 10);  // 출력: 10

 

따라서 Direction객체는 아래와 같은 구조로 만들어집니다.

{
  0: "Up",
  1: "Down",
  2: "Left",
  3: "Right",
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3
}

 

즉 숫자 값을 키로도, 그리고 문자열 값을 키로도 양방향으로 접근할 수 있는 객체가 정의됩니다.

• Direction ["Up"]을 호출하면 0
• Direction [0]을 호출하면 "UP"