【JavaScript】分割代入を使った名前付き引数同然の動作

 引数が多い時、順番を間違える場合があります。大体はTypeScriptやIDEを使ったり、リッチなオブジェクトを渡すことで防止できますがそれとは違ったプリミティブな方法もあります。素のJavaScriptに備わっている分割代入の機能を使うことで名前付き引数同然の動作をさせられます。
 例のコードは次です。

// c = 3, d, e = 5 の様にデフォルト値定義済み引き数の後にデフォルト値なし引数があってもOK
function hoge({a, b, c = 3, d, e = 5}) {
  // a,b,c,d,eの複数の変数が引数として定義されています。一つのオブジェクトではありません
  console.dir([a, b, c, d, e]);// [ 'A', 'b', 3, 4, 'e' ]
}

hoge({
  a: 'A',
  d: 4, // 順番が引数定義と違っていてもOK
  b: 'b',
  e: 'e', // もちろんデフォルト値を上書き可能
  // c===undefinedでもデフォルト値があるからOK
});

 クラス定義を行うほどのリッチなオブジェクトならば分割する必要はなく、TypeScriptならば型定義によって問題が起こる率を格段に減らせます。しかしながらどうにも引数が多くならざるをえない場合や簡素なファイル構成であるべき現場において、この方法はオンリーワンで有用です。
 これを実現している仕組みはオブジェクトの分割代入です。
分割代入 – JavaScript | MDN#オブジェクトの分割代入

/** 上記MDNページ中のコードの引用*/
const user = {
    id: 42,
    is_verified: true
};

const {id, is_verified} = user;

console.log(id); // 42
console.log(is_verified); // true 

 上記の

const {id, is_verified} = user;

と同じことを引数への代入で行っています。ライブラリを読み解いたりする時やブラウザでいきなり動かす気満々のコードを読む時に案外現れるので使う予定がなくとも覚えておくと便利です。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG