Pourquoi utiliser `const foo = () => {}` au lieu de `function foo () {}`

Par exemple, dans cette vidéo Redux , l'instructeur utilise toujours une syntaxe comme

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

où j'utiliserais simplement le "traditionnel"

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

Ce qui est en fait plus court et, à mon avis, plus clair. Il est plus facile de scanner le bord gauche assez uniforme et structuré de la page pour le mot «fonction» que de scanner le bord droit irrégulier pour un petit «=>».

À part this, et en essayant d'être objectif, pas d'opinion, y a-t-il une différence ou un avantage utile à la nouvelle syntaxe?

Les instructions de fonction (fonctions nommées, 2e syntaxe illustrée) sont hissées au sommet de la portée lexicale complète, même celles qui se trouvent derrière des blocs arbitraires et de contrôle, comme les ifinstructions. L'utilisation de const(like let) pour déclarer une variable lui donne une portée de bloc, arrête le levage complet (levage vers un simple bloc) et garantit qu'elle ne peut pas être déclarée à nouveau.

Lors de la concaténation de scripts ensemble ou de l'utilisation d'autres outils de création de packages, le levage de fonctions peut casser des scripts conflictuels de manière difficile à déboguer car il échoue silencieusement. Une nouvelle déclaration constlèvera une exception avant que le programme puisse s'exécuter, il est donc beaucoup plus facile de déboguer.

Voici pourquoi vous devriez utiliser function:

1. La signalisation est claire et concise. Ceci est beaucoup plus bénéfique que toutes les préoccupations de levage de cas de bord qui sont énumérées dans l'autre réponse.

2. Vous voulez réellement hisser dans les modules car comme vous pouvez le voir dans le code ci-dessous, la constdéclaration d' tryDoTheThingéchec en silence et ne sera pas interceptée jusqu'à ce que vous essayiez de l'appeler.

3. La plupart des juniors avec lesquels je suis en contact commencent à utiliser constpour déclarer chaque fonction parce que c'est une mode en ce moment, comme utiliser des espaces sur des tabulations ou tout faire functional!!!parce que "OOP mauvais". Ne fais pas ça. Vous ne voulez pas être ce gars qui suit les modes sans comprendre pleinement les implications.

via 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

contre

/*
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]))
}