Когда мы должны использовать () и {} в функциях стрелок ES6

Question

Меня немного смущает использование скобок и цветочных скобок взаимозаменяемо в функциях стрелок.

Например,

Использование цветочных скобок

const sayHello = () => { console.log('Hello') }

Использование скобок

const sayHello = () => ( console.log('Hello') )

Оба выдают одинаковый вывод на консоль.Они оба значат одно и то же?Извините, если этот вопрос звучит глупо.

Answer 1

Когда вы используете фигурные скобки (цветочные скобки), он определяет тело функции - так что вы можете поместить в них несколько разделенных точкой с запятой операторов. Если вы хотите вернуть значение из функции, вы должны явно использовать оператор return.

Если вы используете скобки, вы будете возвращать значение выражения внутри скобок, и может быть только одно выражение (без точки с запятой). Если вы хотите сделать несколько вещей с круглыми скобками, вы можете использовать оператор запятой:

const doTwoThings = () => (console.log("Hello"), console.log("Goodbye"));
console.log(doTwoThings());

Здесь вы регистрируете Hello, затем Goodbye, затем записываете возвращаемое значение функции - undefined.

Вы можете сделать то же самое внутри фигурных скобок, и вы не увидите никакой видимой разницы:

const doTwoThings = () => {console.log("Hello"), console.log("Goodbye")};
console.log(doTwoThings());

Опять вы регистрируете Hello и Goodbye на консоли, затем вы записываете возвращаемое значение функции - однако для использования {} необходимо иметь явное ключевое слово return, так что это undefined потому что мы ничего не возвращаем из функции.

Также обратите внимание, что иногда вы видите обе фигурные скобки и фигурные скобки:

const aFunction = () => ({ foo: "bar" });
console.log(aFunction());

Есть хорошее объяснение здесь , но в основном, когда у вас есть функция, возвращающая объект, фигурные скобки {} обозначают объект, а скобки обеспечивают неявный возврат содержащегося выражения - объекта , Итак, объект создан, затем выражение вычисляется и возвращается.

Answer 2

Когда вы используете «цветочные скобки» в том виде, в каком вы его выразили, вы как будто определяете обычную функцию, имеющую несколько операторов, как обычно. В вашем примере он запускается console.log('Hello') и ничего не возвращает. Когда вы используете круглые скобки, вы можете указать только одно выражение, и тогда результат этого выражения станет возвращаемым значением. Другими словами, => (bar) в основном совпадает с => { return bar; }. Оба варианта работают одинаково в вашем случае, поскольку вы используете эту функцию только для ее побочных эффектов и не заботитесь о ее возвращаемом значении.