JSの関数で引数を波括弧で囲ってreturn で返すとそれが連想配列のkey になる書き方

Question

表を作成するために、連想配列を返す関数を実装しているのですが、ドキュメントを読んでいて表題のような記法が出てきて気になったので、仕様などが知りたいです。

具体例

function createData (name, item1, item2) {
  return {name, item1, item2}
}
createData('hoge', 'foo', 10);
// {name: 'hoge', item1: 'foo', item2: 10} となる

【追記】
MUIのドキュメントのサンプルに以下のように記載されていました。

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

https://mui.com/components/tables/#main-content

Comments

[m.ts10806]

＞ドキュメントを読んでいて
出典は明示してください。

[shun_harutaro]

ご指摘ありがとうございます。
以後気を付けます

[m.ts10806]

muiというのを使っていることが元の質問内容から分かりませんでした。
Reactに関係しているなら質問タグも追加されたほうが良いと思います。

Answer 1

ECMAScript 2015 での新しい表記法
これらの表記をサポートするための互換性の表を参照してください。非サポート環境では、これらの表記は、構文エラーにつながります。

// Shorthand property names (ES2015)
var a = 'foo', b = 42, c = {};
var o = {a, b, c};

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#1

「Shorthand property names (ES2015)」っぽいですかね。

Comments

[shun_harutaro]

なるほど、波括弧で変数をくくって宣言するとそうなるのですね。注意深くドキュメントを読むようにします。ありがとうございました。