ES6 Fat Arrow and brackets `(...) => ({...})`

Question

I worked with some Graph QL / React / Relay examples, and I came across some weird syntax.

When defining fields in Graph QL objects, the following syntax is used:

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

From what I'm compiling, it's just defining an anonymous function and assigning it to xType.fields. This anonymous function returns an object containing field definitions.

I assume that although the Graph QL schema mechanism works, it should be defined as a function that returns an object, not just an object. But the part that confused me was the bracket around the braces.

Differences in the definition of an object from the definition of a function? Is this for clarity for the sake of the reader?

, google, airbnb, /.

, , Graph QL .

Answer 1

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

- , (). () JavaScript {} , .

parens: () 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

Hide result

, field, 'value', undefined. ?

, , , ( , ) , label:. - , ( ), f() , undefined.

, " ", , , , . (. Mozilla Development Network .)

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

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

Hide result