Когда использовать Function Declaration, а когда Function Expression?

Question

[alex4answ]

на learn.javascript.ru сказано:

Как правило, если нам понадобилась функция, в первую очередь нужно рассматривать синтаксис Function Declaration, который мы использовали до этого. Он даёт нам больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом, можно вызывать до их объявления.

Но в React компонентах и тп, я все чаще и чаще вижу Function Expression:

const Header = () => <div>Header</div>;
export default Header;

В общем я очень много где встречаю именно функциональные выражения, стрелочные функции, а не декларированные функции.

Если все собирает вебпак, с импортами и тп, в любом случае функциональное выражение будет доступно на момент вызова:

const mySum = (x, y) => x+y;
export default mySum;

использую:

import mySum from './mySum';

console.log( mySum(10, 5) );

Есть какие-то условия, правила, указывающие где и что использовать ?
Кроме очевидных мест, что например стрелочные функции не имеют собственного контекста и тп.

На сколько я понял, по сути единственная разница - видимость ф-ии, но при импортах/экспортах это не работает, тк импорт идет явно раньше использования.

Подскажите, пожалуйста, запутался уже

Answer 1

[Владимир]

Нет общих причин использовать тот или иной синтаксис для объявления функций.
В Реакт стрелочные функции используются для того, чтобы в обработчике событий не потерять контекст и не использовать bind. Если к контексту внутри функции не обращаются или нет шанса его потерять - рекомендуется не использовать стрелочные функции.
Это один из примеров, серебрянной пули нет, руководствуйтесь здравым смыслом и style guide конкретного фреймвока или конкретного проекта.

Comments

[abberati]

Кем рекомендуется не использовать стрелочные?) У меня в проекте нет ни одной function declaration и почти ни одной обычной функции — только там, где нужен this. Брат жив.

[Владимир]

abberati
https://wesbos.com/arrow-function-no-no
Пара примеров где они лишние.
Кроме того если дальше твою функцию могут использовать с bind, стрелочная функция поломает всю малину.

[abberati]

Владимир, пролистал по диагонали – в двух словах "не используйте стрелочные, если вам нужен this". ок
в проекте нет ни одного .bind
и не будет)

Answer 2

[alex4answ]

Согласно style guide от Airbnb:
следует избегать декларированных функций, тк они поднимаются и это вредит читабельности и поддержке.

Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability.

В остальном плане все как сказал Владимир.