JSの括弧の文法について

Question

nuxtの教則本に出てきた以下の文法にわからないことがあります。

export default function ({$axios}) {
  $axios.onRequest((config => {
    if(process.env.QIITA_TOKEN){
      config.headers.common['Authorization'] = process.env.QIITA_TOKEN
    }
    return config;
  }))
}

・export default function丸括弧内にさらに波括弧が設定されています。
これは丸括弧内にそのまま書くのと何が違うのでしょうか？

・$axios.onRequest丸括弧内に更に丸括弧があり、config => {}という書かれ方をしていますがどのような処理でしょうか？

よろしくお願いいたします

Answer 1

・export default function丸括弧内にさらに波括弧が設定されています。

これは丸括弧内にそのまま書くのと何が違うのでしょうか？

これは分割代入といって、引数に来たオブジェクトからobj.$axiosだけを回収しています。

・$axios.onRequest丸括弧内に更に丸括弧があり、config => {}という書かれ方をしていますがどのような処理でしょうか？

丸括弧が二重になっていることは特に意味がありません。中身はArrow Functionです。

Answer 2

・export default function丸括弧内にさらに波括弧が設定されています。
これは丸括弧内にそのまま書くのと何が違うのでしょうか？

オブジェクトの分割代入(object destructuring)と呼ばれるもので、引数に指定したオブジェクトの中身を波括弧の中身の変数名に代入するものです。

詳しくは下記を参考にしてみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

・$axios.onRequest丸括弧内に更に丸括弧があり、config => {}という書かれ方をしていますがどのような処理でしょうか？

これはクロージャと呼ばれるもので、即席で関数を作って、その関数をonRequest()に渡しています。
onRequestは関数を受け取り、通信開始時に受け取った関数を実行します。
外側の括弧はなくても動作します。実装した方が括弧を書いた方が見た目上分かりやすいと判断して付けただけかと思われます。

Comments

[hh_t]

詳しくありがとうございます！助かりました。