JavaScriptのアロー関数の引数で{}波括弧で引数が指定される理由は？

Question

疑問点

以下のコードでは、引数がオブジェクトリテラルではないのに、
({})で引数が指定されている。

通常の()で複数の引数を指定する場合と何が違うのか、
検索しても答えに行きつかなかったため、
ご存知の方に伺いたい。

該当のソースコード

const test01 = ({ count, speed, power }) => (

Comments

[takasima20]

関数の中はどうなってんスか?

Answer 1

分割代入だと思います。
引数に指定されたオブジェクトの属性への参照 | 分割代入 - JavaScript | MDN

Comments

[hope_mucci]

以下のようなコードで分割代入がどのような動作をするのか簡単に理解できます。
const hoge = ({a,b,c}) => console.log('hoge',a,b,c);
obj = {a:1, b:2, c:3}
hoge(obj);

出力 -> "hoge" 1 2 3

実引数オブジェクトの属性名と関数仮引数の変数名は一致している必要があります。

Answer 2

引数がオブジェクトリテラルではないのに、

どうしてそう言い切れるのでしょうか。

むしろ、この関数を正しく呼ぶには、適切な形のオブジェクトを渡す必要があると想定されます。

Answer 3

オブジェクトの省略記法らしいス
https://www.webprofessional.jp/shorthand-javascript-techniques/

let x = 1;
let y = 2;
const obj = { x, y };

console.log(obj);