Javascript で辞書のキーに定数や変数を使う方法【初心者向け】

辞書に定数を用いた時の挙動

Javascript で辞書を使っていた時、キーに定数や変数を使いたい場面はよくあると思います。
しかし、以下のように辞書のキー部分に定数を使うと定数名がそのままキーになってしまい、定義した文字列で値を取り出すことができません。

const KEY_TEST = "test";
const dictionary = {
    KEY_TEST: "辞書の値"
};
console.log(dictionary[KEY_TEST]);    // undefined
console.log(dictionary["KEY_TEST"]);  // 辞書の値

辞書に定数を使う方法

辞書のキーとして定数を渡すときに、以下のように定数を大括弧で囲ってあげると内部の値を参照するようになります。
大括弧が必要なのは、JavaScript の言語仕様として、辞書のキーに文字列を使用する時 "" で囲まなくてもよく、変数や定数なのか文字列かの判断がつかないためです。

const KEY_TEST = "test";
const dictionary = {
    [KEY_TEST]: "辞書の値"
};
console.log(dictionary[KEY_TEST]);  // 辞書の値
console.log(dictionary["test"]);    // 辞書の値

サンプルコード

ほかの言語の感覚で書いていたら undefined になり対処法を調べてもすぐには解決方法を見つけられなかったため、今回記事を投稿しました。
私は以下のように、Typescript で enum のキーに対応する値を定義するときによく使用します。

enum SampleEnum {
    one,
    two,
    three,
}

const sample_dict = {
    [SampleEnum.one]: 1,
    [SampleEnum.two]: 2,
    [SampleEnum.three]: 3,
};