값이 변하지 않는 값들을 한 곳에 모와서 사용할 수는 없을까? 타입스크립트의 Enums를 사용해보자.
Enums
열거 의 뜻을 가지고 있는 enum(이넘)은 변하지 않는 값(상수)들의 집합을 정의할 수 있도록 해준다. 타입스크립트의 enum은 숫자형 이넘과 문자형 이넘을 지원하며, enum 안에 값들을 멤버라고 부른다.
여기 enum의 개념을 이해하기 위해 자동차회사들의 이름을 열거한 CarCompany라는 이넘을 선언했다.
자동차회사의 이름은 변하지 않고, 영문으로 변환했을때, 길어지기에 이번 예시에 아주 잘 맞다고 생각하여 자동차회사로 예를 들려고 한다.
enum CarCompany {
hyundai,
volkswagen,
tesla,
ssangyong,
mercedes,
porsche,
}
영어를 정말 잘 안다거나 차에 관심이 많은 사람이 아닌 경우에 하드코딩으로 위에 있는 값들을 타이핑한다면?
높은 경우로 스펠링이 틀리는 휴면에러가 발생할 것이라고 생각한다. 이런 경우에 이넘을 사용하면 이런 휴면에러를 줄일 수 있다.
숫자형 이넘과 문자형 이넘의 차이는 크게 자동-증가(Auto-Incrementing)와 런타임, 리버스 매핑(Reverse Mapping)로 나누어볼 수 있다.
먼저 숫자형 이넘에 대해 알아보자.
숫자형 이넘
숫자형 이넘은 초기 값을 주지 않은 상태에서는 아래 처럼 0부터 차례대로 1씩 증가하는데 이를 자동-증가(Auto-Incrementing)라고한다.
enum CarCompany {
hyundai, // = 0
volkswagen, // = 1
tesla, // = 2
ssangyong, // = 3
mercedes, // = 4
porsche, // = 5
}
Q. hyundai를 4, ssangyong을 11로 초기화한다면 어떻게 될까?
enum CarCompany {
hyundai = 4, // = 4
volkswagen, // = 5
tesla, // = 6
ssangyong = 11, // = 11
mercedes, // = 12
porsche, // = 13
}
시작 값인 4부터 차례대로 +1씩 증가하고, 11로 초기화된 ssangyong부터 다시 +1씩 증가하는 걸 볼 수 있다.
사용하는 방법
사용하는 방법은 선언한 이넘의 멤버 이름을 통해 사용할 수 있습니다.
enum CarCompany {
hyundai = 0,
volkswagen,
tesla,
ssangyong,
mercedes,
porsche,
}
const ssangyongIndex = CarCompany1.ssangyong // 3
계산된 값 ⚠️
계산된 값은 초기화를 진행하지 않습니다.!
Enums는 멤버의 값이 초기화를 통한 값 할당이 되지 않은 값이라면,
다음 멤버는 Enum member must have initializer 와 같은 에러를 만나게 된다.
const getComputedMember = () => {
return 123
}
enum ComputedMember {
A,
B,
D = getComputedMember(),
E, // Enum member must have initializer.
}
초기화된 값 후에 계산된 값을 사용하는 것은 가능하나, 계산된 값의 다음 값은 또 해당에러가 나는 걸 볼 수 있었다.
Reverse Mapping
숫자형 이넘에서만 리버스 매핑이 가능하다. 리버스 매핑이란 멤버의 값을 통해서 멤버의 이름을 가져올 수 있는 걸 말한다.
enum ReverseMapping {
TypeA,
}
let TypeAA = ReverseMapping.TypeA // 0
let ReverseMappingOfTypeA = ReverseMapping[TypeAA] // "TypeA"
문자형 이넘에서는 매핑을 하지 않는다. 하지만 찾아본 결과 비슷하게 사용할 수 있는 방법은 존재했다.. 역시..
그럼 이제 문자형 이넘에 대해 알아보자.
문자형 이넘
문자형 이넘은 숫자형 이넘과 사용방법이 거의 똑같다. 차이점은 리버스 매핑이 전혀 생성이 안된다는 것이고, 자동-증가 기능이 없다. 또한, 숫자형 이넘은 자동으로 초기화되어 따로 초기화를 진행하지 않아도 0부터 시작하는 것을 볼 수 있었지만,,!! 문자형은 무조건 초기화를 진행해야한다.
enum CarCompany {
HD = "hyundai",
VW = "volkswagen",
TS = "tesla",
SY = "ssangyong",
MB = "mercedes",
PS = "porsche",
}
멤버의 이름을 단축어로 값을 풀 네임으로 지정해서 사용하면 다른 곳에서 오타 없이 정확하게 사용할 수 있을 것 같다.
또한 디버깅과정에서 숫자형은 값이 0,1,2와 같이 의미가 추상적인 형태로 나오지만 문자형은 값이 곧 의미를 포함하고 읽기가 쉽기때문에 더 수월하다는 이점이 있다.