enum 사용을 지양해야 하는 이유

enum은 JavaScript로 어떻게 변환될까?

TypeScript의 enum은 JavaScript에 없는 기능이기 때문에, 컴파일 과정에서 JavaScript가 이해할 수 있는 코드로 변환되어야 한다. 이때 IIFE가 사용된다.

// TypeScript 코드

enum WeekDays {
  MON = "Mon",
  TUES = "Tues",
  WEDNES = "Wednes",
  THURS = "Thurs",
  FRI = "Fri",
}

// JavaScript로 컴파일된 결과

var WeekDays;
(function (WeekDays) {
    WeekDays["MON"] = "Mon";
    WeekDays["TUES"] = "Tues";
    WeekDays["WEDNES"] = "Wednes";
    WeekDays["THURS"] = "Thurs";
    WeekDays["FRI"] = "Fri";
})(WeekDays || (WeekDays = {}));

 

function (WeekDays) { ... } 이라는 익명 함수를 만들고 ( . . . ) 로 감싼 뒤 바로 (WeekDays || (WeekDays = {})) 인자를 전달해 실행한다. 이것이 바로 IIFE이다. 

 

 

enum 사용을 지양해야 하는 이유가 뭘까?

 

1. 번들 크기 증가

enum 한 줄이 여러 줄의 IIFE 코드로 바뀌기 때문에 프로젝트에 enum이 많아질수록 JavaScript 번들 파일의 전체 크기가 불필요하게 커진다.

 

2. 트리쉐이킹 문제

가장 중요한 이유 중 하나로, enum은 IIFE로 변환되면서 WeekDays 객체를 생성하고 값을 할당하는 사이드 이펙트가 있는 코드로 취급된다. 번들러는 이 코드가 다른 곳에 영향을 줄 수 있다고 판단해 enum의 일부만 사용하더라도 enum 전체를 번들에서 제거하지 못하는 경우가 많다. 

 

3. const enum의 한계

const enum은 컴파일 시점에 실제 값으로 대체되어 JavaScript 코드를 전혀 남기지 않는다.

const enum WeekDays {
  MON = "Mon",
  TUES = "Tues",
  WEDNES = "Wednes",
  THURS = "Thurs",
  FRI = "Fri",
}

const today = WeekDays.FRI;

var today = "Fri" /* WeekDays.FRI */;

 

이 방법은 번들 크기와 트리쉐이킹 문제를 해결해주지만, --isolatedModules 옵션과 호환되지 않는 문제 때문에 현대적인 개발 환경에서는 사용하기 어렵다. 최신 트랜스파일러는 파일을 개별적으로 변환한다. const enum은 여러 파일에 걸친 타입 정보가 필요하기 때문에 이 방식과 충돌하여 사용이 불가능하다.

 

대안은 무엇일까?

 

유니온 타입 + as const

as const를 사용하여 객체를 읽기 전용으로 만들고, 그 타입을 추론하여 사용하는 방식이다.

const WEEKDAYS = {
  MON: "Mon",
  TUES: "Tues",
  WEDNES: "Wednes",
  THURS: "Thurs",
  FRI: "Fri",
} as const;

type Weekdays = typeof WEEKDAYS[keyof typeof WEEKDAYS];

function printDay(day: Weekdays) {
  console.log(`It's ${day}`);
}

printDay('Mon');

 

enum과 같은 IIFE를 생성하지 않는다. 그냥 일반 JavaScript 객체이다. 단순한 객체이므로 번들러가 사용 여부를 쉽게 파악하고 최적화할 수 있다.

 

[추가적으로 배운 내용]

IIFE(Immediately Invoked Function Expression): 즉시 실행 함수 표현

정의되자마자 즉시 실행되는 함수이다.

 

즉시실행함수를 사용하는 주된 이유

 

1. 전역 스코프 오염 방지

IIFE는 함수를 정의함과 동시에 실행하여 독립적인 내부 스코프를 생성한다. 이 스코프 안에서 선언된 변수와 함수는 외부에 노출되지 않아 전역 스코프를 오염시키지 않는다.

let count = 10;

(function() {
	let count = 20;
    console.log('내부 count:', count); // 내부 count: 20
})();

console.log('전역 count:', count); // 전역 count: 10

 

2. 비공개 변수 생성

IIFE는 클로저를 만드는 대표적인 방법이다. IIFE가 실행된 후에도 내부 함수는 IIFE의 스코프에 접근할 수 있기 때문에, 외부에서 직접 수정할 수 없는 private state를 흉내 낼 수 있다.

const counter = (function() {
	let privateCount = 0; // 비공개 변수로 외부에서 직접 접근하거나 수정할 수 없다.
    
    return {
    	increment: function() {
        	privateCount++;
            console.log(privateCount);
        },
        getCount: function() {
        	return: privateCount;
        }
      };
})();

counter.increment();
counter.increment();
console.log(counter.getCount());
// console.log(counter.privateCount); error

 

3. 최상위 async/await 실행

최신 JavaScript 기능인 async/await는 ES 모듈 환경이 아닌 일반 <script> 태그의 최상위 레벨에서는 바로 사용할 수 없다. 이때, async 키워드를 붙인 IIFE를 사용하면 파일이 로드되는 즉시 비동기 코드를 간결하게 실행할 수 있다.

(async () => {
	try {
    	const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log('데이터 로딩 성공:', data);
    } catch (err) {
        console.error('에러 발생:', err);
    }
})():

 

트리쉐이킹

: 웹팩과 같은 모던 번들러가 실제 사용되지 않는 코드를 최종 결과물에서 제거하여 빌드 타임을 최적화하는 기능이다.