Why does my multi-line arrow function need parentheses instead or curly brackets?

JavaScript
1

Tell us what’s happening:
In Functional Programming: Use the map Method to Extract Data from an Array
I first used:

let ratings = watchList.map(movie => {{title: movie.Title, rating: movie.imdbRating}});

The code returns an error asking for a " ; " in place of the " , ".

SyntaxError: unknown: Unexpected token, expected ";" (117:65)

  115 | // Only change code below this line
  116 | 
> 117 | let ratings = watchList.map(movie => {{title: movie.Title, rating: movie.imdbRating}});
      |                                                                  ^
  118 | 
  119 | // Only change code above this line
  120 |

I then tried both of these and it worked.

let ratings = watchList.map(movie => ({title: movie.Title, rating: movie.imdbRating}));

let ratings = watchList.map(movie => {return {title: movie.Title, rating: movie.imdbRating}});

Is this just a weird case of syntax error on the arrow function when creating an object? Or is there a fundamental concept I am not understanding about why the double brackets in the original code isn’t working?

Challenge: Use the map Method to Extract Data from an Array

Link to the challenge:

2

When it comes to the body of an arrow function, JavaScript doesn’t know whether a pair of braces denotes a code block or an object literal. When returning an object, you explicitly return it.

3

Thanks for the help. That makes sense.

I assume using return is preferred to the parentheses?

4

I believe so.