JavaScript Enum (列挙型)

Javascriptexamples

JavaScriptでEnum、列挙型を使用するさまざまな方法を紹介します。 JavaScriptにはenumキーワードがないので、const、Symbol、Object.freeze()などを使ってEnumを実装して使うことができます。

1.単にconstでEnumを実装する

次のようにconstでEnumを定義できます。

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

以下のようにEnumを使用できますが、この実装方法の問題は、Enumと他の値を区別できないことです。 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

Related Posts

codechachaCopyright ©2019 codechacha