[JS] 자바스크립트 열거형(Enum) 구현하기

 

 

 

 

 

🌈 자바스크립트 열거형(Enum) 구현하는 방법

Enum은 enumerated type의 줄임말이며 열거형 타입이라는 의미를 갖는다.

하지만, 자바스크립트에는 열거형(Enum) 타입이 존재하지 않으므로 enum타입을 사용하기 위해서는 직접 구현해야 한다.

 

 

🙋‍♂️ 열거형 타입을 사용하는 이유

• 코드가 단순해지며 가독성이 좋아진다.
• 하나의 변수에 대해서 고정값으로 사용할 수 있다.
• 특정값을 반복해서 체크해야 하는 상황에서 오류의 발생을 줄일 수 있다.

 

 

 

1️⃣ 상수를 이용한 구현

const Fruit = {
  APPLE : 100,
  BANANA : 200,
  ORANGE : 300
};

위 코드와 같이 const를 통해 상수 값을 할당하면 간편하게 Enum처럼 사용할 수 있다.

하지만 위 코드는 객체 내부의 값을 변경할 수 있기 때문에 추가적인 처리를 해 주어야 한다.

 

따라서 Object.freeze() 메서드를 이용하여 외부에서 값을 변경할 수 없도록 만들도록 한다.

 

const Fruit = {
  APPLE : 100,
  BANANA : 200,
  ORANGE : 300
};

Object.freeze(Fruit);

Fruit.APPLE = 500;   // 값이 변경되지 않는다
console.log(Fruit.APPLE); // 100

 

 

 

 

2️⃣Symbol을 이용한 구현

Enum을 구현할 때, Enum의 value를 Symbol로 감싸주면 다른 변수와 구분하여 사용할 수 있다.

또한, Symbol을 이용하였을 때는 Enum값의 구분을 위해 switch문을 사용한다.

const Fruit = {
  APPLE : Symbol(100),
  BANANA : Symbol(200),
  ORANGE : Symbol(300)
};

Object.freeze(Fruit);

 

위 코드를 간소화한 코드는 아래와 같다.

const Fruit = Object.freeze({
  APPLE : Symbol(100),
  BANANA : Symbol(200),
  ORANGE : Symbol(300)
});

 

 

 

 

3️⃣ Enum에 여러가지 속성 부여하기

Enum타입의 값에 여러가지 속성을 부여하고 싶을 때에는 아래와 같이 구현할 수 있다.

const Fruit = Object.freeze({
  APPLE:   { name: "apple", price: 100 },
  BANANA:  { name: "banana", price: 200 },
  ORANGE: { name: "orange", price: 300 }
});

 

 

 

 

 

 

 

📌 참고 사이트

stackoverflow :: Enums in Javascript with ES6