web-dev-qa-db-ja.com

アロー関数でオブジェクトリテラルを囲む括弧はどういう意味ですか？

次のようなJavaScriptコードを見ました。

let a = () => ({ id: 'abc', name: 'xyz' })

かっこは何ですか( … )このインスタンスで参照するオブジェクトをラップしていますか？ returnの短縮形ですか？

javascriptecmascript-6arrow-functions
26
Stanley

いいえ。これらの括弧はオブジェクトリテラルを生成します。 矢印関数 には多くの構文があり、その1つは次のとおりです。

( … ) => expression

これにより、暗黙的に式が返されます。次に例を示します。

() => 1 + 1

この関数は、暗黙的に1 + 1、つまり2を返します。別のものはこれです：

( … ) => { … }

これは block を作成し、暗黙的に式を返したくない場合や、中間計算を実行したり、値をまったく返さない場合に、複数のステートメントを格納します。例えば：

() => {
  const user = getUserFromDatabase();
  console.log(user.firstName, user.lastName);
}

この問題は、暗黙的にオブジェクトリテラルを返したい場合に発生します。 ( … ) => { … }はブロックとして解釈されるため、使用できません。解決策は括弧を使用することです。

括弧は、{ … }がブロックではなくオブジェクトリテラルとして解釈されるためにあります。 グループ化演算子 、( … )では、式の中にのみ存在できます。ブロックは式ではなく、オブジェクトリテラルがなので、オブジェクトリテラルが想定されます。したがって、ブロックを作成する代わりに、次の構文を使用します。

( … ) => expression

そして暗黙的にオブジェクトリテラルを返します。括弧がないと、オブジェクトリテラルのキーや値ではなく、 labels および文字列として解釈されます。

let a = () => { 
  id: 'abc', //interpreted as label with string then comma operator
  name: 'xyz' // interpreted as label (throws syntax error)
}

ここのコンマは コンマ演算子 として解釈され、オペランドは式でなければならず、ラベルはステートメントなので、構文エラーをスローします。

40
Li357

式を作成できるので、

_let a = () => ({ id: 'abc', name: 'xyz' })
_

aが呼び出されたときに、囲まれたオブジェクトを返すことを指定します

この場合に_()_を削除すると、有効な関数本体ステートメントではないため、エラーがスローされます。これは、let a = () => { id: 'abc', name: 'xyz' }内の_{}_が、ステートメントですが、中身を見ると無効です。

_let a = () => {
    id: 'abc',    /* Not valid JS syntax */
    name: 'xyz'
}
_
8
Teedeez