행복을 담는 블로그

[Typescript] enum v.s. object literal 비교하기 본문

FrontEnd/Typescript

[Typescript] enum v.s. object literal 비교하기

hyun0zin 2024. 3. 6. 20:25

enum v.s. object literal 비교해보기

enum

: 열거형 데이터 타입으로, 상수의 그룹화를 할 수 있는 아주 좋은 타입이다.

✅ enum의 장점

  • 코드의 가독성을 높이고, 명확한 상수 값을 정의할 수 있다.
  • 컴파일 시, 자동의 숫자 값이 할당되므로 따로 값을 할당할 필요가 없다!
enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

enum UserLevel {
  NOT_OPERATOR, // 0
  OPERATOR // 1
}

function checkPermission(userRole: UserRole, userLevel: UserLevel): void {
  if (userLevel === UserLevel.NOT_OPERATOR) {
    console.log('당신은 일반 사용자 레벨이에요');
  } else {
    console.log('당신은 운영자 레벨이군요');
  } 

  if (userRole === UserRole.ADMIN) {
    console.log("당신은 어드민이군요");
  } else if (userRole === UserRole.EDITOR) {
    console.log("당신은 에디터에요");
  } else {
    console.log("당신은 사용자군요");
  }
}

const userRole: UserRole = UserRole.EDITOR;
const userLevel: UserLevel = UserLevel.NOT_OPERATOR;
checkPermission(userRole, userLevel);

▶️ 숫자와 문자열을 그룹화하여 열거형으로 데이터를 나타낼 수 있다.



object literal

: key-value pair로 구성된 객체를 정의하는 방식이다.
enum과 비슷하지만 const 또는 let 키워드를 사용하여 선언한다.

const obj = {
  a: [1,2,3],
  b: 'b',
  c: 4
}

▶️ 배열, 문자열, 숫자 등 어떤 타입의 값을 대입할 수 있다.

✅ object literal의 장점

  • enum은 number 또는 string 타입만 대입할 수 있으나, object literal은 어떠한 타입의 값도 대입할 수 있다.
  • 코드를 사용하기 전에 값이 할당 되어야하므로, 런타임 에러를 방지할 수 있다.



enum과 object literal 은 각각 언제 사용하면 좋은가?

📌 enum을 쓰면 좋은 경우

  • 간단한 상수 값을 그룹화하여 관리하기 좋다.
  • enum은 상수 값이므로, 각 멤버의 값이 변하면 안 된다.

📌 object literal을 쓰면 좋은 경우

  • 멤버의 값이나 데이터 타입을 마음대로 변경할 수 있다.
  • 복잡한 구조와 다양한 데이터 타입을 사용해야 할 때, 객체 리터럴을 사용하면 좋다.