Wann wird eine Funktionsdeklaration im Vergleich zu einem Funktionsausdruck verwendet?

Tech Jargon Serie

Wahrscheinlich wissen Sie bereits, wie man Funktionen auf beide Arten schreibt. function doStuff() {}und () =>{} sind Zeichen, die wir den ganzen Tag eingeben. Aber wie unterscheiden sie sich und warum übereinander verwenden?

Hinweis: Beispiele finden Sie in JavaScript. Y unserer M ileage M ay V ary mit anderen Sprachen.

Der erste Unterschied: ein Name

Wenn Sie eine Funktion mit einem Namen erstellen , ist dies eine Funktionsdeklaration . Der Name kann in Funktionsausdrücken weggelassen werden , wodurch diese Funktion "anonym" wird.

Funktionsdeklaration:

function doStuff() {};

Funktionsausdruck:

const doStuff = function() {}

Wir sehen oft anonyme Funktionen, die mit der ES6-Syntax verwendet werden, wie folgt:

const doStuff = () => {}

Heben

Das Heben bezieht sich auf die Verfügbarkeit von Funktionen und Variablen "oben" in Ihrem Code und nicht erst, nachdem sie erstellt wurden. Die Objekte werden zur Kompilierungszeit initialisiert und sind überall in Ihrer Datei verfügbar.

Funktionsdeklarationen werden gehisst, Funktionsausdrücke jedoch nicht.

Mit einem Beispiel ist es leicht zu verstehen:

doStuff();
function doStuff() {};

Das Obige wirft keinen Fehler aus, aber dies würde:

doStuff();
const doStuff = () => {};

Der Fall für Funktionsausdrücke

Es scheint, als würden Funktionsdeklarationen mit ihren leistungsstarken Hebeeigenschaften Funktionsausdrücke aus Gründen der Nützlichkeit verdrängen. Um jedoch eine über die andere zu wählen, müssen Sie darüber nachdenken, wann und wo die Funktion benötigt wird . Wer muss das wissen?

Funktionsausdrücke werden aufgerufen, um eine Verschmutzung des globalen Bereichs zu vermeiden . Anstatt dass Ihr Programm viele verschiedene Funktionen kennt, werden sie sofort verwendet und vergessen, wenn Sie sie anonym halten.

IIFE

Der Name - sofort aufgerufene Funktionsausdrücke - sagt hier so ziemlich alles. Wenn eine Funktion gleichzeitig mit dem Aufruf erstellt wird, können Sie ein IIFE verwenden, das folgendermaßen aussieht:

(function() => {})()

oder:

(() => {})()

In diesem umfassenden Artikel finden Sie ausführliche Informationen zu IIFEs.

Rückrufe

Eine an eine andere Funktion übergebene Funktion wird in JavaScript häufig als "Rückruf" bezeichnet. Hier ist ein Beispiel:

function mapAction(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

Das Problem hierbei ist, mapActiondass es für Ihre gesamte Anwendung verfügbar ist - das ist nicht erforderlich. Wenn dieser Rückruf ein Funktionsausdruck ist, ist er außerhalb der Funktion, die ihn verwendet, nicht verfügbar:

array.map(item => { //do stuff to an item })

oder

const mapAction = function(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

Es mapActionwird jedoch verfügbar sein, um unterhalb seiner Initialisierung zu codieren .

Zusammenfassung

Kurz gesagt, verwenden Sie Funktionsdeklarationen, wenn Sie eine Funktion im globalen Bereich erstellen und im gesamten Code verfügbar machen möchten. Verwenden Sie Funktionsausdrücke, um die Verfügbarkeit der Funktion einzuschränken, den globalen Gültigkeitsbereich beizubehalten und eine saubere Syntax beizubehalten.

Verweise

  • Funktionsdeklaration, MDN-Dokumente.
  • Funktionsausdruck, MDN-Dokumente.
  • Heben, MDN-Glossar.

Die Tech Jargon Serie

Es gibt so viele Redewendungen, die bei technischen Meetups und Konferenzen herumgeworfen werden, vorausgesetzt, jeder hat bereits den Jargon verloren. Ich bin oft nicht mit dem Jargon fertig. Entwickler sind häufig erstaunt darüber, dass mir ein Stück Wissen fehlt.

Die Wahrheit ist, ich kenne oft einfach nicht das richtige Wort dafür. Als Menschen, aber insbesondere als Entwickler, lieben wir es, diejenigen zu entlassen, die nicht „reden“. In dieser Serie geht es darum, ein solides Verständnis für Programmierkonzepte zu erlangen, die man „kennen sollte“.

Dies ist der zweite Artikel in der Reihe. Das erste waren Funktionen höherer Ordnung. Achten Sie auf mehr, wenn ich zu Meetups und Konferenzen gehe und so tue, als wüsste ich, wovon meine Kollegen sprechen, aber dann muss ich nach Hause gehen und es googeln.