ES6 Fat Arrowと括弧 `（...）=>（{...}）`

Question

Graph QL/React/Relayのいくつかの例を使っています。

グラフQL内のフィールドを定義するには、次の構文が使用されているオブジェクト：

const xType = new GraphQLObjectType({ 
    name: 'X', 
    description: 'A made up type for example.', 
    fields:() => ({ 
    field: {/*etc.*/} 
    }) 
}); 

私は、これは単に無名関数を定義し、xType.fieldsに割り当てている集める何より。その無名関数は、フィールド定義を含むオブジェクトを返します。

しかし、Graph QLスキーマの仕組みが動作していると仮定していますが、これは単なるオブジェクトではなくオブジェクトを返す関数として定義する必要があります。しかし、私が混乱している部分は中括弧の周りのかっこです。

これは、オブジェクト定義と関数定義を区別するためですか？それは読者のための明快さのためですか？

Google検索で見つかった似たようなシンタックスは、読みやすさ/明瞭さのように見えるエアブロブスタイルのガイドです。

Graph QLをもう少し試してみると、私の前提以外の確認や説明を探しています。

Answer 1

fields:() => ({ 
    field: {/*etc.*/} 
}) 

は、暗黙的にオブジェクト（リテラル）を返す関数です。 ()を使用しない場合JavaScriptインタプリタは、{}をオブジェクトではなく関数本体のラッパーとして解釈します。

括弧を使用しないで：field: ...ステートメントはlabelステートメントとして扱われ、関数はundefinedを返します。同等の構文は次のとおりです。

fields:() => { // start of the function body 
    // now we have to define an object 
    // and explicitly use the return keyword 
    return { field: {/*etc.*/} } 
} 

したがって、親は明確にはありません。これは、矢印関数の暗黙的戻り関数を使用するためのものです。

Answer 2

コンパイラだけでなく読者のためにも分かりやすくするためです。あなたの例ではfield:構文は、これは、オブジェクトリテラルであることを明確な景品ように見えますが、例えば、このコードを取る：

let f =() => { 
 
    field: 'value' 
 
} 
 

 
console.log(f()) //=> undefined

あなたは、これはfieldセットでオブジェクトをログに記録するように期待します'value'になりますが、undefinedが記録されます。どうして？

基本的に、あなたは、単一のプロパティを持つオブジェクトリテラルとして何を参照してください、コンパイラが構文label:を使用しています（一般的な機能のように、中括弧を開閉によって示される）関数本体と単一label statement、と見ています。次の式は単なるリテラル文字列であり、決して返されない（または変数に代入されることもある）ため、関数f()は効果的に何もせず、結果はundefinedです。

しかし、 "オブジェクトリテラル"の周りにかっこを置くことで、コンパイラは一連の文ではなく式と同じ文字を扱うように指示します。したがって、目的のオブジェクトが返されます。 （コメント欄のthis article on the Mozilla Development Networkを参照してください。）

let g =() => ({ 
 
    field: 'value' 
 
}) 
 

 
console.log(g()) //=> { field: 'value' }