オープンソースのコードを読んでいると、このようなコードが出てきたりする

function hoge({piyo}){
    console.log(piyo);
}

このように普通単に変数名で引数を受けるところが、なぜか変数名が中括弧で囲まれているというやつ。

これは分割代入という記述方法の応用らしく、このような関数は、このように使われることを期待している。

function hoge({piyo}){
    console.log(piyo);
}
hoge({
    piyo: "ぴよ",
    fuga: "ふが"
});   // => "ぴよ"

このような結果になる。つまりオブジェクトを渡しているのだが、そのオブジェクト内で関数側の引数名と同名プロパティだけを選択的に取得するという記述ということだ。

じゃあこのような記述の関数にストレートに値を渡してみよう

function hoge({piyo}){
    console.log(piyo);
}
hoge("ぴよ");   // => undefined

はいだめ。

では複数のキーを記述してみよう

function hoge({piyo, fuga}){
    console.log(piyo);
    console.log(fuga);
 
}
hoge({
    piyo: "ぴよ",
    fuga: "ふが",
    moge: "もべ"
});   // => "ぴよ" "ふが"

これも受けられるようだ。

では階層化してたらどうなのか

function hoge({fuga:{fugafuga}, boo}){
    console.log(fugafuga);
    console.log(boo);
 
}
hoge({
    piyo:{
        piyopiyo: "ぴよ"
    },
    fuga:{
        fugafuga: "ふが"
    },
    moge:{
        mogemoge: "もげ"
    },
    boo: "ブー"
});   // => "ふが" "ブー"

取り出せる。

しかしながら、これ単に抽出する記述を関数内に置くか関数外に置くかの違いであって、 逆に関数の責務をぼやかすことになってよくない気がするんだが。