[TS series] TS 기본문법 #9

_sqrlkoo·2023년 1월 9일

JavaScript js ts typescript

TypeScript

목록 보기

9/12

Enum type

Enum type은 JS에는 존재하지 않는 문법으로 TS에만 존재하는 문법이다.

처음에는 Enum type이 이해가지 않았다.

일반 객체와 비슷하게 생겼기 때문에 그냥 객체로 타입을 정의하면 되지 않을까?

강의를 들어도 그 의문은 해결되지 않았다.

그래서 Enum type의 용도, 예시 위주로 블로그를 찾아봤다.

우선 Enum type의 정의를 알아보자!

Enum type의 정의

enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입니다.

예를 들어, 사용자를 권한별로 관리해야할 때 enum으로 정의해두고 사용한다.

enum Auth {
  admin = 0,
  user = 1,
  guest =2
}

글 처음에서 언급한 것 처럼 객체와 다른점이 보이지 않는다.

그럼 왜 Enum type을 사용할까?

Enum type이 필요한 이유

분야별로 종류를 정의하여 명확하게 사용하기 위해서
하드코딩을 하지 않기 위해서

1. 분야별 종류를 정의하여 사용하는 경우

예를들어 사용자 권한을 관리자 = 0, 회원 = 1, 게스트 = 2로 관리할 경우, 개발자는 관리자 == == 0 이라는걸 기억하고 코딩해야 한다.

하지만, 관리하는 값이 늘어날 수록 실수가 발생하기 쉽다.

if (userType !== 0) {
  alert("관리자 권한이 없습니다!")
}

하지만 enum으로 정의해두면,

사용자 권한 분야만 따로 모아서 정의해두고, 의미를 명화갛게 파악하여 사용할 수 있다.

내가 좋아하는 ! 자동완성까지 되므로 코딩이 편해지고 가독성이 좋아진다.

enum Auth {
  admin = 0,
  user = 1,
  guest = 2
}

if (userType !== Auth.admin) {
  alert("관리자 권한이 없습니다!")
}
// 누가 읽어도 Auth.admin 은 관리자임을 보여준다.

2. 하드코딩을 줄일 수 있다.

예를 들어 언어 종류를 정의해야하는 경우, 직접 'ko', 'en'을 하드코딩하면 실수할 수 있고, 'ko' 였는지, 'KO'였는지 등등 매번 찾아봐야 한다.

하지만, enum으로 정의해두면 이런 하드코딩을 막을 수 있다.

enum Languages {
  korean = 'ko',
  english = 'en',
  		.
		.
  		.
}

setLanguage(Languages,korean)
// enum 사용시, 의미파악이 쉽고 자동완성까지 된다.

Enum type의 기초 문법

enum은 기본으로 0부터 1씩 증가하는 값을 갖는다.

enum Auth {
    admin, // 0 : 별도로 값을 지정해주지 않으면 0부터 시작한다
    user,  // 1 : 이전 값에 1씩 더해진다.
    guest  // 2 : 이전 값에 1씩 더해진다.
}

console.log(Auth.admin);  // 0
console.log(Auth.user);   // 1
console.log(Auth.guest);  // 2

정의되지 않은 값은 이전 값에서 1씩 증가한다.

enum Articles {
    notice = 100, // 값을 직접 지정 가능
    board = 300,  // 값을 직접 지정 가능
    comment       // 자동으로 앞의 300에 +1 더해줌 => 301
}

console.log(Articles.notice);  // 100
console.log(Articles.board);   // 300
console.log(Articles.comment); // 301

문자열을 지정해 줄수 있다.

enum Languages {
    korean = 'ko',
    english = 'en',
    japanese = 'jp',
    chiense = 'cn'
}

console.log(Languages.korean);   // "ko"
console.log(Languages.english);  // "en"
console.log(Languages.japanese); // "jp"
console.log(Languages.chiense);  // "cn"