【JavaScript】ネストされたオブジェクトにES6デフォルトパラメータを設定する方法

ネストされたオブジェクトにもデフォルトパラメータは使える？

はい、ES6ではネストされた（入れ子になった）オブジェクトに対してもデフォルトパラメータを設定することが可能です。デフォルト引数と分割代入（デストラクチャリング）を組み合わせることで、オブジェクトの深い階層にあるプロパティにも初期値を簡単に指定できます。

以下に具体的なコード例を示します。

コード例

function callBackFunctionDemo({ cl: { callFunctionName = "callBackFunction", values = 100 } = {} } = {}) {
    console.log(callFunctionName);
    console.log(values);
}
// 引数なしで呼び出すと、デフォルト値が出力される // 100
callBackFunctionDemo();
// 値を指定して呼び出すと、その値が出力される // 500
callBackFunctionDemo({ cl: { values: 500 } });

コードの仕組み

この関数では、パラメータを受け取ると同時に分割代入を行っています。ポイントは次の2つです。

• 最も外側の = {}：引数自体が渡されなかった場合に、空オブジェクトが代わりに使用されます。
• 内側の { callFunctionName = "callBackFunction", values = 100 } = {}：cl プロパティが存在しない場合も空オブジェクトに置き換えられ、各プロパティには = の右側に記述したデフォルト値が適用されます。

この二重構造のおかげで、引数を一切渡さなくてもエラーにならず、安全にデフォルト値が利用できます。

実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を demo296.js としています。

出力結果

コンソールには次のように表示されます。

PS C:\Users\Amit\javascript-code> node demo296.js
callBackFunction
100
callBackFunction
500

動作のポイント

• callBackFunctionDemo() を引数なしで呼び出すと、すべてのデフォルト値が適用され、「callBackFunction」と「100」が出力されます。
• callBackFunctionDemo({ cl: { values: 500 } }) のように一部だけ値を渡すと、指定した「500」のみが上書きされ、関数名はデフォルト値のまま出力されます。

このように、ネストされたオブジェクトの各階層にデフォルト値を定義しておけば、柔軟かつ堅牢な関数設計が可能になります。