Warum sollten Sie "const foo = () => {}" anstelle von "function foo () {}" verwenden?

12

In diesem Redux-Video verwendet der Kursleiter beispielsweise immer eine Syntax wie

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

wo ich nur das "traditionelle" verwenden würde

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

Welches ist eigentlich kürzer und, IMO, klarer. Es ist einfacher, den ziemlich gleichmäßigen und strukturierten linken Rand der Seite nach dem Wort "Funktion" zu durchsuchen, als den zerlumpten rechten Rand nach einem kleinen "=>" zu durchsuchen.

Anders als this, und zu versuchen , objektiv zu sein, nicht Meinung nach gibt es einig nützlichen Unterschied oder Vorteil für die neumodische Syntax?

user949300
quelle
3
Diese Frage auf StackOverflow könnte Sie interessieren: stackoverflow.com/questions/34361379/…
Vincent Savard
3
Ich bin kein JavaScript-Experte, aber ich vermute, dass dies dazu constbeiträgt, dass die Funktion später nicht neu definiert wird.
MetaFight
Danke @VincentSavard, das ist perfekt und im Grunde das, was ich erwartet hatte: Abgesehen von "diesem" und Prototypen / Klassenmaterial scheint es keinen wirklichen Unterschied zu geben.
user949300
3
@ user949300 Es gibt einen Unterschied, den MetaFight erwähnt. Auch Prototypen / "dieses Zeug" werden schnell zu kritischen Unterscheidungen.
Msanford
1
Lange Rede, kurzer Sinn: Sie sollten Wert auf Klarheit und Prägnanz legen, um einen Vorteil zu erzielen.
Wayne Bloss

Antworten:

11

Funktionsanweisungen (benannte Funktionen, 2. Syntax gezeigt) werden an die Spitze des gesamten lexikalischen Bereichs gehoben, selbst diejenigen, die hinter beliebigen und Steuerblöcken stehen, wie ifAnweisungen. Die Verwendung von const(like let) zum Deklarieren einer Variablen gibt ihr den Blockumfang, stoppt das vollständige Heben (Heben auf bloßen Block) und stellt sicher, dass sie nicht erneut deklariert werden kann.

Wenn Sie Skripte miteinander verketten oder andere Tools zum Erstellen von Paketen verwenden, kann das Hochziehen von Funktionen widersprüchliche Skripte auf eine Weise beschädigen, die schwer zu debuggen ist, da sie unbemerkt fehlschlägt. Eine erneute Deklaration constlöst eine Ausnahme aus, bevor das Programm ausgeführt werden kann, sodass das Debuggen viel einfacher ist.

Dandavis
quelle
Vielen Dank. gute Antwort. Ich habe hauptsächlich an kleineren JS-Projekten oder Node.js-Serverprojekten gearbeitet, bei denen sie ein gutes Modulsystem für den Namespace haben. Aber wenn Sie gerade mit einem clientseitigeren Projekt mit Bundlern beginnen, ist dies ein guter Einblick.
user949300
2
Nur ein Hinweis, dass eslint no-func- assign dieses Problem mit der erneuten Erklärung auffangen kann.
user949300
2
Das Schreiben von Code mit verwirrenden Signalen, um die Vorteile einer statisch typisierten Sprache zu nutzen, ist ein Grund, Typescript nicht zu verwenden const. Es ist ein bisschen kurzsichtig, IMO, constaus diesem Grund im Zeitalter von Eslint, Webpack, Babel usw. überall zu arbeiten. Seit mindestens einem Jahrzehnt verkettet niemand mehr manuell Dateien.
Wayne Bloss
2

Hier ist, warum Sie verwenden sollten function:

  1. Die Signalisierung ist klar und prägnant. Dies ist weitaus vorteilhafter als alle in der anderen Antwort aufgeführten Probleme beim Heben von Randfällen.

  2. Sie möchten tatsächlich innerhalb von Modulen hochziehen, da, wie Sie dem folgenden Code entnehmen können, die constDeklaration des tryDoTheThingFehlschlags stillschweigend fehlschlägt und erst abgefangen wird, wenn Sie versuchen, sie aufzurufen.

  3. Die meisten Junioren, mit denen ich in Kontakt komme const, deklarieren jede Funktion, weil es gerade eine Modeerscheinung ist, z. B. Leerzeichen über Tabulatoren zu verwenden oder alles zu machen, functional!!!weil "OOP schlecht". Tu das nicht. Sie wollen nicht der Typ sein, der Modeerscheinungen folgt, ohne die Auswirkungen vollständig zu verstehen.

über 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

vs.

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