[자바스크립트] enum을 배우고 구현해보자.

constant 상수

[자바스크립트] let, const 키워드를 사용하자.

const에 대해선 이전 포스팅을 참고하자.

 

 

자바스크립트의 const 키워드는 "변하지 않는 값"을 위해 사용한다.

const는 상수(변하지 않는 값)이며,  상수의 반대 개념은 변수(변하는 값)이다.

 

이 상수와 enum이 관련이 있으니, 먼저 알아두자.

---

Enum

Enum은 Enumerated type의 줄임말이다.

열거하는 타입 이라는 의미를 가진다.

 

그런데, 무엇을 열거한다는 것일까?

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

 

이 enum 타입은, 자바스크립트의 자료형은 아니다.
자바에서는 enum 타입을 제공하지만, 자바스크립트에는 없다.

 

이 자료형과 조금이나마 비슷하게 작동할 수 있는 데이터를

자바스크립트에서도 간단하게 만들 수 있기는 하다.

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

 

enum의 예시)
계절 변수에 - [봄, 여름 가을, 겨울]을 담는 경우
요일 변수에 - [일, 월, 화, 수, 목, 금, 토]를 담아야 하는 경우
등을 예로 들 수 있겠다.

 

---

왜 Enum이 필요한가??

상수 값을 모아두고 써야 할 때 꽤 유용하기 때문이다.

 

enum의 장점

• 코드가 단순해지고 가독성이 좋아진다.
• enum이란 이름 자체로, 열거 의도를 나타낸다.
• 하나의 변수에 대한 고정값으로 사용 가능하다.
  • 여러분이 "string", "String"을 헷갈려서 자주 오류가 발생하면, enum에 선언해서 "자동완성"기능을 이용해라.

 

즉 안정적이며 읽기 쉽고 오류 발생도 줄일 수 있다.

 

---

자바스크립트 enum 예시

if(data === "summer") console.log("Summer is hot!");

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

다른 파일들에서, 동일한 "summer" 문자열에 대해 기능을 구현할 때,
Season 값이 "Summer" 일지, "summer" 일지 종종 혼동되는 것은 당연하다.

심지어는 "summet"로 작성할 수도 있다.

 

이 때 상수를 활용하면, 실수가 발생할 수 없게 된다.

const SUMMER = "summer";
if(data === SUMMER) console.log("Summer is hot!");

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

 

 

복습해보자.

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

1. 일관성이 있다.
   • 정확한 값이 "Summer"인지, "summer인지는 상수 선언 초기에만 생각하면 된다.
2. 오류 처리에 유리하다.
   • 들어온 데이터에만 문제가 없다면, 오류가 발생할 일이 없겠다.
   • 우리는 상수만 가져오면 되기 때문에, "summet"와 같은 어이없는 실수를 할 일도 없다.

 

상수로 "착각하기 쉬운" 값을 미리 선언해두고, 변수 참조로 쓰는 것은 좋은 습관이다.

seasons라는 범주에는 summer 뿐만이 있는 것이 아니다.

이 상수들을 묶기 위해서, enum을 사용할 차례다.

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

자바스크립트에선 객체로 선언해서 seasons.SPRING 과 같이 사용하면 된다.

하지만 객체의 "key" : "value" 값은 변경될 수 있다.

 

"상수 집합" 역할의 enum을 위해선, 선언한 값을 외부에서 변경할 수 없다면 더 좋겠다!

 

---

Object.freeze

Object.freeze는 enum처럼 객체를 사용할 수 있게 도와줄 수 있다.

 

freeze는 객체의 프로퍼티의 변경을 막아준다.

(= 객체를 동결(얼려버려서)해서 더이상 변경하지 못하도록 한다.)

 

그래서 객체의 속성들이 "불변성"을 지니게 된다.

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

앞으로 유사한 성질의 상수들을 모아두면 유용하다고 생각할 때, enum을 활용해보자.

 

---

꿀팁) 구조분해할당

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

// 선언한 enum을 참조할 때의 2가지 형태.

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

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

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

 

 

참고한 사이트

https://www.delftstack.com/ko/howto/javascript/javascript-enum/

https://limkydev.tistory.com/50

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ivory82&logNo=220089272992