[자바스크립트] Enum 구현

Enum

Enum은 Enumerated type의 줄임말로 열거하는 타입을 뜻한다. 여기서 무엇을 열거하느냐가 Enum의 중요한 포인트이다. Enum을 자바스크립트에서 const 키워드로 선언되는 변수인, 상수를 열거하여 묶어두기 위해 주로 사용되는 타입이다.

 

다른 프로그래밍 언어와는 달리, 자바스크립트를 공부하면서 Enum에 대해서는 거의 접하지 못하는 데 그 이유가 자바스크립트는 Enum 타입을 제공하지 않기 때문이다. 하지만, 자바스크립트의 메소드를 활용하여 구현할 수 있기 때문에 이번 글에서는 어떻게 자바스크립트에서 Enum 타입을 구현하는지에 대해 알아보자.

 

 

 

Enum을 사용하는 이유

Enum을 사용하는 이유는 같은 집합으로 묶일 수 있는 상수 데이터를 사용할 때 유용하기 때문이다. 여기서 집합으로 묶일 수 있는 상수 데이터의 예시는 아와 같다.

• 계절 : 봄, 여름, 가을, 겨울
• 요일 : 일, 월, 화, 수, 목, 금, 토

이러한 데이터를 사용할 때, 다음과 같은 상황을 한번쯤을 겪어보았을 것이다. ( 아마, 자주 겪을 것이다. )

// 특정 데이터가 "summer"가 맞는지 확인
// summet이라고 오타...
if(data === "summet") console.log("summer is hot!!");

// 앞이 대문자...
if(data === "Summer") console.log("Summer is so hot!!!");

 

코드가 길어지다 보면, 위와 같이 오타가 발생할 수 도 있고, 대문자로 시작하는지 소문자로 시작하는지 헷갈리는 경우 또한 발생할 수 있다. 하지만 문자열 내에 오타이기 때문에, IDE가 오류를 잡아주지도 않기 때문에 모르고 넘어가는 경우가 많다.

 

이러한 상황을 예방하기 위해서는, 중복되지만 변하지 않는 값에 대해서는 상수를 활용하는 습관을 들여야 한다.

// summer 문자열을 갖는 상수 데이터 생성
const SUMMER = "summer";
if(data === SUMMER) console.log("summer is hot!!");

// 오타 발생 시 => 에러 발생(빨간줄...)
if(data === SUMMET) console.log("Summer is so hot!!!");

 

위와 같이, 상수를 선언해주게 되면 해당 상수만을 사용하여 헷갈리는 일이 없어지고 오타가 발생해도 변수명이 달라지는 것이기 때문에 오류가 발생하기 때문에 오타 또한 잡기가 쉬워진다. 

 

위와 같은 상수들을 비슷한 역할들끼리 집합으로 묶어 일관성을 줌으로써 코드의 가독성과 해당 코드의 이해도를 높이기 위해 사용하는 것이 바로 Enum인 것이다. 이런 Enum을 사용하게 되면 얻을 수 있는 이점으로는 아래와 같다.

• 코드가 간결해짐 => 가독성이 좋아짐
• enum이라는 이름 자체로 열거 의도를 보여줄 수 있음
• 하나의 변수에 대한 고정값으로 사용 가능

즉, enum을 사용하며 안정적이면서 읽기 쉽고 오류 발생도 줄일 수 있다.

 

 

 

Enum 구현해보기

Enum은 상수 값 중 역할이 비슷한 값들을 묶어 열거하여 사용한다. Enum의 특징 중 값들의 열거는 자바스크립트의 객체를 이용하여 표현할 수 있다.

// 객체 이용하여 상수 값들 선언
// 계절
const seasons = {
    SPRING : "spring",
    SUMMER : "summer",
    AUTUMN : "autunm",
    WINTER : "winter"
}

// 요일
const day = {
    SUNDAY : "sunday",
    MONDAY : "monday",    
    TUESDAY : "tuesday",    
    WEDNESDAY : "wednesday",    
    THURSDAY : "thursday",    
    FRIDAY : "friday",    
    SATURDAY : "saturday",    
}

 

비슷한 값들의 열거는 객체를 이용하여 나타낼 수 있지만 자바스크립트의 프로퍼티는 변경 가능하기 때문에(상수가 아니다) Enum의 상수 값의 열거를 표현하기 위해서는 자바스크립트 Object의 freeze 정적 메소드를 사용하여야 한다.

 

Object의 정적 메소드 freeze를 사용하면, 해당 객체의 프로퍼티의 변경을 막아주기 때문에 객체의 속성들이 불변성을 지니는 상수의 역할을 할 수 있게 되는 것이다.

// Object.freeze()
// 객체의 불변성을 부여
Object.freeze(seaseons);
Object.freeze(day);

 

이러한 방법으로, 자바스크립트에서도 Enum을 구현하여 사용할 수 있다. 자바스크립트의 문법을 이용하여 구현하는 것이기 때문에 Enum과 관련된 여러 기능들은 없는 것이 단점...