constant 상수
[자바스크립트] let, const 키워드를 사용하자.
이전 글 [자바스크립트] var 키워드를 사용하지 말아야 하는 이유 자바스크립트에서 변수를 선언하는 방법으로는 var, const, let 3가지 키워드가 있다. 사실 EcmaScript5 전까지는 var 키워드만 존재했으
gobae.tistory.com
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.");
복습해보자.
이렇게 "상수"값으로 사용 할 "문자열"을 선언해두면,
- 일관성이 있다.
- 정확한 값이 "Summer"인지, "summer인지는 상수 선언 초기에만 생각하면 된다.
- 오류 처리에 유리하다.
- 들어온 데이터에만 문제가 없다면, 오류가 발생할 일이 없겠다.
- 우리는 상수만 가져오면 되기 때문에, "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
'JavaScript > theory' 카테고리의 다른 글
[자바스크립트] 비동기 작업, 이벤트 루프와 태스크 큐 (1) | 2021.08.22 |
---|---|
[자바스크립트] 동기와 비동기 이해하기. (1) | 2021.08.21 |
[자바스크립트] XML과 JSON 포맷 배우기 (0) | 2021.08.01 |
[자바스크립트] 일급 객체? 함수! (0) | 2021.07.24 |
[자바스크립트] ?. 연산자, 옵셔널 체이닝 (0) | 2021.07.08 |