JavascriptのObject Literalを使った条件分岐

条件分岐を簡潔に書きたい！

条件分岐をする場合、通常はif～else文やswitch～case文を使うことが一般的ですが、Object Literalを活用すると簡潔にコードを書くことできる場合があります。Object Literalを利用するのは、ちょうどPHPのarray、JavaのMap、C#のDictionaryなどの連想配列を利用するイメージが近いと思います。

switch～case文とObject Literalを使った場合のコード例をいくつか示していきます。

switch～case文とローカル変数を使った場合

function GetStockCode_LocalVariable(makerName)
{
    let code = "";
    switch(makerName)
    {
        case "Asus":
            code = "2557";
            break;
        case "MSI":
            code = "2377";
            break;
        default:
            throw new Error("unsupported maker: " + makerName);
   }

   console.log(code);
}

一般的な書き方ですが、下記の短所があります。

• mutableなローカル変数のcodeを定義しなければならない。
• switch～caseのキーワードやbreakキーワードが何度も出現し、重要な部分がわかりにくい

switch～case文と即時実行関数式(Immediately Invoked Function Expression)を使った場合

function GetStockCode_IIFE(makerName)
{
    const code = (() => {
        switch(makerName)
        {
            case "Asus":
                return "2557";
            case "MSI":
                return "2377";
            default:
                throw new Error("unsupported maker: " + makerName);
        }
    })();
    
    console.log(code);
}

mutableなローカル変数をなくするために関数を使って書いたバージョンです。使っているテクニックは「アロー関数式」「即時実行関数式」です。
ここまでで十分という場面もありますが、下記の欠点があります。

• switch～caseのキーワードやreturnキーワードが何度も出現し、重要な部分がわかりにくい
• メーカー名とStock Codeの対応関係が外部ファイルで設定されている場合、そのファイルを読み込んでswicth文に変換することはできない

Object Literalを使った場合

function GetStockCode_ObjectLiteral(makerName)
{
   const code = (name => ({
       "Asus": "2557",
       "MSI" : "2377",
   })[name])(makerName);

   if(code === undefined)
   {
       throw new Error("unsupported maker: " + makerName);
   }

   console.log(code);
}

コードを見るとわかりますが、Object Literalを使うとメーカー名とStock Codeの対応関係の部分の書き方が無駄がなく、大変読みやすくなっていることがわかります。実際、メーカー名とStock Codeの対応関係の部分をjsonファイルにして、そのファイルを読み込むように作り変えることができます。条件分岐がなく「宣言的 (Declarative)」になっていることにも注意してください。
ただ、()や{}が多用されているのでjavascriptの構文に慣れていないとなんでこう動くのかわかりにくいところもあると思います。部分ごとに書き下すと下記のようになります。

function GetStockCode_ObjectLiteral_ForExplanation(makerName)
{
   // Object Literal (この部分を外部の設定ファイル化することができる)
   const setting = {
        "Asus": "2557",
        "MSI" : "2377",
   };

   // 名前をキーにして、settingオブジェクトに基づいてStock Codeを返す関数
   const GetSettiing = name => (setting)[name];

   // 関数を実行してコードを取得
   const code = GetSettiing(makerName);

   if(code === undefined)
   {
       throw new Error("unsupported maker: " + makerName);
   }

   console.log(code);
}

まとめ

いくつか方式を紹介しましたが、一般的なswitch～case文と比べると、Object Literalの威力がわかったと思います。ぜひ活用してみてください。