[Javascript] 열거형 Enum

 

 

Javascript 에서 enum을 사용하기

 

Enum

Enum은 enumerated type의 줄임말입니다.

말 그대로 열거하는 타입이라는 의미를 가집니다.

 

무엇을 열거한다는 것일까요?

 

상수 값 중에서 비슷한 종류들을 묶어두기 위한 용도로 자주 사용됩니다.

 

자바스크립트에서의 enum 타입은, 고유한 타입이 아닙니다.

자바에서는 enum 타입을 제공하지만, 자바스크립트에서는 정의되어 있지 않습니다.

 

하지만 이 자료형과 조금이나마 비슷하게 작동할 수 있는 데이터를 자바스크립트에서도 간단하게 만들 수 있기 때문에 정리해보았습니다.

(타입으로 정의되어 제공하는 언어들보다는, 훨씬 기능이 적을 수 밖에 없습니다.)

 

Enum을 사용하는 이유?

 

위에서 언급한 듯이, 상수 값을 모아두고 써야 할 때 유용합니다.

 

enum의 장점은 다음과 같습니다.

• 코드가 단순해지고 가독성이 좋습니다.
• enum이란 이름 자체만으로도, 열거 의도를 분명히 알 수 있습니다.
• 하나의 변수에 대해서 고정값으로 이용이 가능합니다.
• 안정적이며 읽기 쉽고 오류의 발생도 줄일 수 있습니다.

 

자바스크립트에서 enum의 예시

 

항상 반복되는 문자열 체크에 대한 위험을 인지하고 있다면, enum을 더 유용하게 사용할 수 있습니다.

 

 

if(data === "winter") console.log("Winter is cold!");


...
if(data === "Winter") console.log("But I like Winter.");

다음과 같이 다른 위치에서, 동일한 문자열에 대해 작업을 해야 할 때, Season 값이 "Winter"일지, "winter"일지 종종 혼동되는 것은 당연합니다.

심지어, "wimter"와 같은 오타를 발생 시킬 가능성도 큽니다.

 

이 때, 다음과 같은 코드를 작성한다면 의도치 않은 실수가 발생할 걱정도 없을 것입니다.

 

const WINTER = "winter";


if(data === WINTER) console.log("Winter is cold!");


...
if(data === WINTER) console.log("But I like Winter.");

위의 코드와, 아래의 코드는 확실히 다릅니다.

 

이렇게 "상수"값으로 사용할 "문자열"을 선언해두면,

1. 일관성이 있습니다.
   - 정확한 값이 "Winter"인지, "winter"인지는 상수 선언 초기에만 생성하면 됩니다.
   - VSCode의 자동완성 등의 유용한 기능을 사용할 수 있습니다.
2. 오류 처리에 유리합니다.
   - 들어온 데이터에만 문제가 없다면, 오류가 발생할 일이 없겠다고 보면 됩니다.
   - 우리는 상수만 가져오면 되기 때문에, "wimter"과 같은 어이없는 실수를 할 일도 없을 것입니다.

 

이렇게 유용한 상수로 "착각하기 쉬운" 값을 선언하고 가져다 쓰는 것은 좋은 습관입니다.

 

위의 예시와 같이 Season이라는 범주로 상수를 묶고자 할 때 enum을 사용할 수 있을 것입니다.

 

const Season = {
    SPRING: "spring",
    SUMMER: "summer",
    AUTUMN: "autumn",
    WINTER: "winter"
};

다음과 같이 자바스크립트에선 객체로 선언해서 Season.SPRING과 같이 사용할 수 있습니다.

 

하지만 문제가 있는데 , "key":"value" 값을 가진 이 데이터 값은 변경될 수 있습니다.

실제로 상수들의 집합 역할을 하는 enum의 역할을 수행하기 위해선, 선언한 값을 외부에서 변경할 수 없어야 합니다.

 

Object.freeze

mdn: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

 

자바스크립트에서 enum처럼 객체를 사용할 수 있도록 Object.freeze() 가 도와줍니다.

Object.freeze() 메서드를 이용해서, 한 번 선언된 객체의 값을 변경하지 못하도록 할 수 있습니다.

 

이 메서드는, 객체를 동결(얼려버려서)해서 더이상 변경하지 못하도록 합니다.

그렇기 때문에 속성은 "불변성"을 지니게 됩니다.

 

 

const Season = {
    SPRING: "spring",
    SUMMER: "summer",
    AUTUMN: "autumn",
    WINTER: "winter"
};


Object.freeze(Season);      // freeze!


Season.SPRING = "SPRING";   // 변하지 않습니다!!
console.log(Season.SPRING); // "spring"

팁

 

const Season = {
    SPRING: "spring",
    SUMMER: "summer",
    AUTUMN: "autumn",
    WINTER: "winter",
};
Object.freeze(Season);

// 다음과 같이 선언한 값들을 참조할 때, 아래와 같은 형태를 띌 수 있습니다.

// 1. 객체.프로퍼티
if(true){
    console.log(Season.SPRING);
}

// 2. 구조분해할당
if(true){
    const {SPRING} = Season;
    console.log(SPRING);
}

// 함수나 블럭 안에서 상수를 한 번만 참조할 때는 1번 방법이 좋겠지만,
// 여러 번 혹은 다른 상수 WINTER 등도 사용해야 한다면, 2번으로 내부에서 구조분해할당을 이용하는 편이 더 유용할 것 입니다.

 

출처

https://learntutorials.net/ko/javascript/topic/2625/%EC%97%B4%EA%B1%B0-%ED%98%95

JavaScript => 열거 형

https://gobae.tistory.com/96?category=940543

[자바스크립트] enum 이란?