Навіщо використовувати `const foo = () => {}` замість `function foo () {}`

Наприклад, у цьому відео Redux інструктор завжди використовує синтаксис типу

const counter = (state=0, action) => {
   ... function body here
}

де я би просто використав "традиційний"

function counter(state=0, action) {
   ... function body here
}

Що насправді коротше і, ІМО, чіткіше. Простіше сканувати досить рівний і структурований лівий край сторінки на слово "функція", ніж сканувати правий край на невеликий "=>".

Окрім this, і намагаючись бути об'єктивним, а не думкою, чи є якась корисна різниця чи перевага новомодного синтаксису?

Висловлювання функцій (названі функції, показаний 2-й синтаксис) піднімаються до вершини повного лексичного діапазону, навіть ті, що стоять за довільними та керуючими блоками, як ifтвердження. Використання const(як let) для оголошення змінної надає їй область блоку, зупиняє повне підняття (піднімання простого блоку) і забезпечує його неможливість повторного оголошення.

При об'єднанні сценаріїв разом або в деяких з використанням інших інструментів побудови пакетів, підйом функцій може порушити конфліктні сценарії способами, які важко відладкувати, оскільки він виходить з ладу. Повторно оголошений constвикине виняток до запуску програми, тому налагодити це набагато простіше.

Ось чому ви повинні використовувати function:

1. Сигналізація чітка і лаконічна. Це набагато вигідніше, ніж будь-яке з проблем, що перебувають у кращому випадку, перелічених у іншій відповіді.

2. Ви насправді хочете підняти всередині модулів, оскільки, як видно з наведеного нижче коду, constдекларація про tryDoTheThingзбій мовчки і не буде спіймана, поки ви не спробуєте її зателефонувати.

3. Більшість юніорів, з якими я вступаю в контакт, починають використовувати constдля декларування кожної функції, тому що зараз це примха, як, наприклад, використовувати пробіли над вкладками або робити все functional!!!тому, що "OOP поганий". Не робіть цього. Ви не хочете бути тим хлопцем, який слідкує за примхами, не розуміючи повністю наслідків.

через https://gist.github.com/stephenjfox/fec4c72c7f6ae254f31407295dc72074

/*
This shows that, because of block-scoping, const function references must be
invoked in-order or else things will fail silently.
const's are added the name space serially (in the order in which they appear)
and much of the body isn't declared when we first try to invoke or functions
*/


const tryDoTheThing = () => {
  console.log(`This is me trying to be awesome ${getAwesome()}`)
}


// "getAwesome is not defined", because it is referenced too early
tryDoTheThing() // comment to see the rest work


const getAwesome = () => (+((Math.random() * 10000).toString().split('.')[0]))


const doTheThing = () => {
  console.log(`This is awesome! ${getAwesome()}`)
}

doTheThing() // prints

проти

/*
Function declarations are given two passes, where the first lifts them to
the top of the namespace, allowing "out of order" usage
*/

doTheThing();


function doTheThing() {
  console.log(`This is awesome number ${getAwesome()}`)
}

function getAwesome() {
  return (+((Math.random() * 10000).toString().split('.')[0]))
}