【JS】returnの...の意味

Question

Next.jsのチュートリアルを進めていたのですが、以下のコードが出てきました。

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents)

  // Combine the data with the id
  return {
    id,
    ...matterResult.data
  }
}

このreturnの中にある...matterResult.dataですが、なぜ...をつける必要があるのでしょうか？
また、...この点々は何を意味しますか？

googleで自分なりに検索してみたのですが、それっぽい記事を見つけることができませんでした。

どなたかわかる方いらっしゃいましたら、回答して頂けると助かります。

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

上記の参考コード：https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops
このサイトの一番上のコードです。

Answer 1

「スプレッド構文」です。

この場合、オブジェクト matterResult.data のキーと値の全ペアがreturnするオブジェクトに埋め込まれます。returnするオブジェクトのあるキーがmatterResult.dataを指すのとは違う結果です。

Comments

[chacopipi]

スプレッド構文で調べてみたら理解しました。
どうもありがとうございました！

Answer 2

googleで自分なりに検索してみたのですが、それっぽい記事を見つけることができませんでした。

「"javascript" "dot dot dot"」「"javascript" "three dots"」「"javascript" "点点点"」「"javascript" "3点"」「"javascript" "ドット3つ"」あたりで検索すると、有用なサイトが見つかりました。
JavaScript: dot dot dot by example
What are three dots (…) in Javascript
今すぐ使いたいスプレッド構文、"Three-dots" Tip 集
【ECMAScript 5_6_7】7、ES6——点点点运算符
「…」←これ、ただの省略記号かと思ってました。（Spread operatorのお話）
[JavaScript] ドット3つの意味 {...foo}みたいなやつ

また、Wikipediaで「...」を検索すると「リーダー (記号)」に飛び、英語版を見るとページ名「Ellipsis」、見出しに「Programming languages」の項があるので見ると少々の説明と「Ellipsis (computer programming)」へのリンクがあり、ここを見ると、JavaScriptの例はありませんでした。残念。他言語の可変引数の意味は載っているんですけどねえ。