타입스크립트(typescript)/개념

[typescript] 타입스크립트 이넘

Doo Hee 2024. 7. 14. 11:09
Document

📝이넘

이넘(enum)이란?

이넘이란 특정 값의 집합을 의미하는 데이터 타입이다. 상수 집합이라고도 표현한다.

여기서 상수란 변하지 않는 값, 자바스크립트에서의 const를 의미한다. 이넘은 여러 개의 상수를 하나의 단위를 묶은 것으로 비슷한 범주에 있는 상수를 묶어 더 큰 단위의 상수로 만드는 것을 의미한다.

 


 

 

이넘 선언

이넘을 선언하는 방법은 인터페이스를 선언하는 것과 같다. enum이라는 키워드를 입력하고 중괄호{ } 안에 상수를 적으면 된다.

enum 이름 {
  // 상수
}

// 예시
enum Companies {
  Naver,
  Coupang,
  Line,
  Kakao,
}

 


 

상수 불러오기

이넘 안에 존재하는 값을 불러오는 방법은 2가지가 존재한다.

  • 자바스크립트의 객체처럼 .을 이용하여 속성 값을 가져올 수 있다. 여기서 이넘 안의 상수는 차례로 0부터 1씩 증가하는 숫자값을 가진다.
  • 배열안의 요소를 불러오는 것처럼 대괄호[ ]를 이용하여 불러올 수 있다. 배열의 인덱스처럼 차례대로 0번, 1번..순서를 가진다.
enum Companies {
  Naver,
  Coupang,
  Line,
  Kakao,
}

// 객체의 속성을 이용해 불러오기
console.log(Companies.Naver); // 0 출력
console.log(Companies.Coupang); // 1 출력
console.log(Companies.Line); // 2 출력
console.log(Companies.Kakao); //3 출력

// 배열의 인덱스로 불러오기
console.log(Companies[0]); // Naver 출력
console.log(Companies[1]); // Coupang 출력 
console.log(Companies[2]); // Line 출력
console.log(Companies[3]); // Kakao 출력

 

이때 .속성명으로 호출하면 값이 출력되고, [ 값 ]의 형태로 값을 이용하여 호출하면 속성명이 출력된다. 속성과 값은 거꾸로 연결되어 할당되어있는데 이를 리버스 매핑(reverse mapping)이라고 한다. 

 

이넘에 기본적으로 0부터 1씩 증가하는 숫자 값이 할당되지만 원한다면 숫자 값을 집적 지정할 수 있다. 뿐만 아니라 숫자가 아닌 문자열을 지정할 수도 있다.

 

단, 값을 지정할 땐 각각의 상수에 동일한 데이터 타입을 지정해주는 것이 좋다. 또한 문자열로 지정할 경우, 상수의 이름과 할당될 값을 동일하게 지정해주는 것이 좋다.

// 숫자로 지정하기
enum Companies {
  Naver = 1,
  Coupang = 2,
  Line = 3,
  Kakao = 4,
}

// 문자열로 지정하기
enum Companies {
  Naver = "Naver",
  Coupang = "Coupang",
  Line = "Line",
  Kakao = "Kakao",
}

 


 

이넘의 특징

  • 혼합 이넘: 숫자와 문자열을 섞어서 선언할 수 있다.
  • 다양한 형태: 연산자나 함수를 이용하여 값을 정의할 수 있다.
enum Companies {
  Naver = 1,
  Coupang = 2,
  Line = "abc".length,
  Kakao = Naver + Coupang,
}

 


 

const 이넘

const는 변수를 선언할 때 사용하는 예약어(키워드)이다. 이넘을 정의할 때도 const를 앞에 써주면 자바스크립트로 코드 변환시 코드의 길이를 줄일 수 있다는 점에서 장점을 가진다.

다만, const 이넘을 사용하면 항상 속성 값에 고정 값만을 넣어야 한다.