Что означают круглые скобки, переносящие литерал объекта в функцию стрелки?

Ответ 1

Нет. Эти круглые скобки также не обертывают объектный литерал, а производят литерал объекта. Функции стрелок имеют много синтаксисов, один из которых:

( … ) => expression

Это неявно возвращает выражение, например:

() => 1 + 1

Эта функция будет неявно возвращать 1 + 1, которая равна 2. Другим является следующее:

( … ) => { … }

Это создаст block для размещения нескольких операторов, если вы не хотите явно возвращать выражение, и если хотите выполнять промежуточные вычисления или не возвращать значение вообще. Например:

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

Проблема возникает, когда вы хотите неявно возвращать литерал объекта. Вы не можете использовать ( … ) => { … }, потому что он будет интерпретироваться как блок. Решение состоит в том, чтобы использовать круглые скобки.

Скобки заключаются в том, что { … } интерпретируется как литерал объекта, а не блок. В оператор группировки, ( … ) в них могут существовать только выражения. Блоки - это не выражения, а объектные литералы, поэтому предполагается литерал объекта. Таким образом, вместо создания блока он будет использовать этот синтаксис:

( … ) => expression

И неявно возвращать литерал объекта. Без круглых скобок он будет интерпретироваться как метки и строки, а не ключи и значения объектного литерала.

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

Здесь запятая будет интерпретироваться как оператор запятая, а так как операнды должны быть выражениями, а метки - это выражениями, они будут бросать синтаксическая ошибка.

Ответ 2

Это позволяет вам создать выражение, поэтому

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

указывает, что a при вызове возвращает закрытый объект

Если вы удалите () в этом случае, он выдает ошибку, потому что это не действительный оператор body функции, потому что {} in let a = () => { id: 'abc', name: 'xyz' } интерпретируются как границы оператора, но контент внутри недействительно, если вы посмотрите на него.

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