JavaScript Enum (열거형)

Javascriptexamples

자바스크립트에서 Enum, 열거형을 사용하는 여러가지 방법을 소개합니다. 자바스크립트에는 enum 키워드가 없기 때문에 const, Symbol, Object.freeze() 등을 이용하여 Enum을 구현하여 사용할 수 있습니다.

1. 간단히 const로 Enum 구현

다음과 같이 const로 Enum을 정의할 수 있습니다.

const Colors = {
  WHITE : 0,
  BLACK : 1,
  GREY : 2,
};

아래와 같이 Enum을 사용할 수 있는데, 이 구현 방법의 문제는 Enum과 다른 value를 구별할 수 없다는 점입니다. color = 1처럼 Enum을 이용하지 않고 설정해도 BLACK으로 인식됩니다.

const Colors = {
  WHITE : 0,
  BLACK : 1,
  GREY : 2,
};

function printColor(color) {
  switch (color) {
    case Colors.WHITE:
      console.log('White');
      break;
    case Colors.BLACK:
      console.log('Black');
      break;
    case Colors.GREY:
      console.log('Grey');
      break;
    default:
      console.log('color not defined');
  }
}

let color = Colors.BLACK;
printColor(color)

color = 1;
printColor(color)

Output:

Black
Black

2. Symbol로 Enum 구현

Symbol을 이용하면 위에서 소개한 문제점을 해결할 수 있습니다. Enum을 정의할 때, Enum의 value를 Symbol로 감싸주면 다른 변수와 Enum이 구분됩니다.

const Colors = {
  WHITE : Symbol(0),
  BLACK : Symbol(1),
  GREY : Symbol(2),
};

function printColor(color) {
  switch (color) {
    case Colors.WHITE:
      console.log('White');
      break;
    case Colors.BLACK:
      console.log('Black');
      break;
    case Colors.GREY:
      console.log('Grey');
      break;
    default:
      console.log('color not defined');
  }
}

let color = Colors.BLACK;
printColor(color);

color = 1;
printColor(color);

color = Symbol(1);
printColor(color);

Output:

Black
color not defined
color not defined

하지만 위와 같은 구현 방법에도 문제는 있습니다. 프로그램 실행 중간에 Enum의 value가 변경될 수 있다는 것입니다.

아래 코드는 위와 같은 방식으로 Enum을 구현하였습니다. 그런데 코드 중간에 Colors.BLACK = 'aaa';으로 Enum을 변경하려고 시도하고, 실제로 변경이 됩니다. 실행 결과를 보면 Enum의 값이 변경되는 것을 알 수 있습니다. 이런 문제를 해결하려면, freeze를 사용하여 초기화가 끝난 Enum이 변경되지 않도록 구현해야 합니다.

const Colors = {
  WHITE : Symbol(0),
  BLACK : Symbol(1),
  GREY : Symbol(2),
};

function printColor(color) {
  switch (color) {
    case Colors.WHITE:
      console.log('White');
      break;
    case Colors.BLACK:
      console.log('Black');
      break;
    case Colors.GREY:
      console.log('Grey');
      break;
    default:
      console.log('color not defined');
  }
}

let color = Colors.BLACK;
printColor(color);

Colors.BLACK = 'aaa';
printColor(color);

Output:

Black
color not defined

3. Symbol, Object.freeze()로 Enum 구현

아래와 같이 Object.freeze()로 Enum을 구현하면, 중간에 Enum을 바꾸려고 시도해도 값이 변경되지 않습니다.

const Colors = Object.freeze({
  WHITE : Symbol(0),
  BLACK : Symbol(1),
  GREY : Symbol(2),
});

function printColor(color) {
  switch (color) {
    case Colors.WHITE:
      console.log('White');
      break;
    case Colors.BLACK:
      console.log('Black');
      break;
    case Colors.GREY:
      console.log('Grey');
      break;
    default:
      console.log('color not defined');
  }
}

let color = Colors.BLACK;
printColor(color);

Colors.BLACK = 'aaa';
printColor(color);

Output:

Black
Black

References

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha