javascript - Syntax of fat arrow functions (=>), to use or not to use {} around the body

Question

I am looking at this code - https://facebook.github.io/react-native/docs/network.html

return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })

From what I understand .then((response) => response.json()) translates into:

.then(function(response) {
    return response.json()
}

but I can't figure out what does this translate into? there is an extra {} in it

.then((responseJson) => {
        return responseJson.movies;
      })

Answer 1

The basic syntax of fat arrow functions is:

(arg1, arg2, ...) => { ... }

However:

1. You can omit the () around the argument list if there's exactly one argument:

   arg => { ... }
   

2. You can omit the {} around the function body if you only have a single expression in the body, in which case return is also implied:

   arg => arg.foo
   // means:
   (arg) => { return arg.foo; }
   

Since callbacks of the form function (arg) { return arg.prop; } are extremely common in Javascript, these two special cases to the syntax make such common operations extremely concise and expressive. E.g.:

arr.filter(foo => foo.bar)