Vueファイル内においてJavaScriptの関数を記述するときの記法でわからないことがあります

Question

いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

---

【質問の主旨】

Vueファイルのscriptタグ内に以下のコードがあります。

<script>
...
export default {
   name: 'Post',
   data: () => ({
      posts: [],
	  ...
   }),
	...
}
</script>

このコードの中でdataプロパティの属性値として無名関数が定義されています。=>のあとは({}) （丸かっこと波かっこ）で括られていますが、このうち()（丸かっこ）は何を意味するのでしょうか？

【質問の補足】

1. 関数で使うかっこについて

JavaScriptの文法において関数の定義を表すためには{} があれば十分であると思います。MDNで関数について説明したページの例文をざっくりと読む限りでは、() => ({}) となるような例文はないように思います。

2. コードについて

上記のコードは、こちらのGitHubで公開されているこちらのページから引用をしています。また質問の対象としている行はこちらです。

3. 丸かっこを省くとどうなるか?

丸かっこを省いて以下のように書くと、VS Codeから文法エラーを指摘されます。

data: () => {
	posts: [],
	...
}, // エラー

---

以上、よろしくお願い申し上げます。

Answer 1

まず前提として、アロー関数は本体が一文の場合{}を省略して書くことができます。
そしてその中身は暗黙的に返り値として扱われます。

const returnName = () => 'John'

は

const returnName = function () {
  return 'John'
}

と同じです。

また、以下のように配列や内部での条件分岐などもそれが一文であれば{}を省略して値を返すことができます。

const returnNameArray = () => ['John', 'Mike']
const returnPrice = age => age > 12 ? 1500 : 100 

ただし、オブジェクトでそれをやった場合、{}が関数の持つブロックなのかオブジェクトを表すものなのか分かりません。
そのためアロー関数でオブジェクトを括弧を省略して値として返す場合には、それが明示的にオブジェクトであると示す必要があり、そのために()をつけます。

つまり、質問文の

data: () => ({
  posts: []
})

は

data: function () {
  return {
    posts: []
  }
}

// または
data() {
  return {
    posts: []
  }
}

と同じということになります。

Comments

[echizeyayota]

taku-hu さん
ご説明ありがとうございます！
アロー関数でオブジェクトリテラルを返すときになぜ丸かっこが必要なのかよく分かりました！
今後ともよろしくお願いします！

Answer 2

アロー関数式でオブジェクトリテラルを返す場合は、式の周りに括弧が必要です。
アロー関数式 - JavaScript | MDN を確認してくだい。

params => ({foo: "a"}) // オブジェクト {foo: "a"} を返す

Comments

[echizeyayota]

ku__ra__ge さん。
コメントとリンクの紹介ありがとうございます。
「高度な構文」のところでオブジェクトリテラル式を返す場合は、式の周りに（丸）括弧が必要であることが書かれていることが分かりました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#advanced_syntax

今後ともどうぞよろしくお願いします。

Answer 3

アロー関数がわかっているなら、外の()は関数を示すブラケットで、中の{}はオブジェクトを示すリテラルです。つまり

function(){
      {posts: []}, //この中の括弧はオブジェクトリテラル
      ...
},

と同じことです。ちなみにアロー関数の場合は()=>{}とすることもありますが、それが有効なのは文字列などが代入される場合で、オブジェクトリテラルを代入する場合は()=>({key:value})で記述しないといけないようです。

(初心者向け) JavaScript の関数 (ES6対応)

Comments

[echizeyayota]

FKM さん。
コメントとリンクの紹介ありがとうございます。参考にさせていただきました。
MDNの「アロー関数式」→「高度な構文」のところでオブジェクトリテラル式を返す場合は、式の周りに（丸）括弧が必要であることが書かれていることが分かりました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#advanced_syntax

今後ともどうぞよろしくお願いします。