Verschiedene Wege eine Funktion zu deklarieren. Unterschiede?

[Elma]

Moin.

Man kann in Javascript Funktionen ja auf mehreren Wegen deklarieren.

Zwei häufige Wege sind diese:

function test1() {
  console.log("Funktion test1");
}

var test2= function () {
  console.log("Funktion test2");
}

test1();
test2();

Dann gibt es auch noch weitere Wege, wie z.B. mittels Konstruktor, was ich erst mal nicht näher betrachte.

Was ist genau der Unterschied zwischen den beiden oben genannten Wegen?

Grüße

 

[Dormilich]

Das erste ist eine Function Declaraion, das zweite eine Function Expression.

 

[xorg1990]

Und den Function constructor nicht vergessen:
Different ways of defining functions in JavaScript (this is madness!) | David Calhoun

oder halt:

Sehr interessant.

 

[Elma]

Danke für den Film, der ist wirklich gut

 

[tsseh]

keine ahnung was im film erwähnt wurde, aber

function test1() {
  console.log("Funktion test1");
}

ist wie erwähnt eine functiondeclaraion und

var test2= function () {
  console.log("Funktion test2");
}

eine functionexpression.

eine functionexpression wird zur laufzeit angelegt und eine functiondeclaraion spätestens wenn die funktion in der diese funktion deklariert ist aufgerufen wird.
beim hoisting wird die vollständige functionsdeklaraion hochgezogen. damit ist eine funktion die über eine functiondeclaraion angelegt wird von anfang (der funktion in der sie deklariert wurde) an verfügbar im gegensatz zu einer functionexpression

test1(); // ok
function test1() {
  console.log("Funktion test1");
}
test2(); // nicht ok
var test2= function () {
  console.log("Funktion test2");
}

 

[Elma]

Was mir bei Experimenten aufgefallen ist, ist folgendes:

Die Funktionen, die per Deklaration, also mit "function test1()" erstellt werden, landen im globalen "Window" Objekt und sind überall aufrufbar.

Funktionen die per Expression erstellt werden, landen in dem Bereich, in dem die Variable deklariert wurde und sind nicht einfach global aufrufbar.
Funktionen, die per Expressions erstellt werden, können auch leichter als Methode in ein Objekt eingebunden werden, ohne dass man sie erst separat deklarieren muss und per Zuweisung einbinden muss.


Wenn ich mir Beispielcodes ansehe, werden dort überwiegend Funktionsausdrücke benutzt, Funktionsdeklarationen seltener.

 

[tsseh]

Die Funktionen, die per Deklaration, also mit "function test1()" erstellt werden, landen im globalen "Window" Objekt und sind überall aufrufbar.

dem ist aber nicht so

 

[Elma]

@tsseh Wenn ich innerhalb einer Funktion eine weitere Funktion deklariere, landet sie dann in deren Scope, und ich komm von Außen nicht ran, sehe ich das richtig?
Aber wenn man sie "Draußen" deklariert, ist es eine globale Funktion?
Sprich, es erscheint immer da, wo ich es deklariere.

Mit der Expression Schreibweise landet die Funktion hingegen im Gültigkeitsbereich der Variable, in die ich es hineinstecke? Auch wenn ich "von wo anders aus" eine Variable mit einer Funktion befülle?

 

[tsseh]

@tsseh Wenn ich innerhalb einer Funktion eine weitere Funktion deklariere, landet sie dann in deren Scope, und ich komm von Außen nicht ran, sehe ich das richtig?

ja

Aber wenn man sie "Draußen" deklariert, ist es eine globale Funktion?

wenn "Draußen" der globale scope ist, ja

Mit der Expression Schreibweise landet die Funktion hingegen im Gültigkeitsbereich der Variable, in die ich es hineinstecke?

es gibt keinen "Gültigkeitsbereich der Variable", sondern nur funkionsscope, mit let seit es6 auch blockscope
aber functiondeclaration und functionexpression verhalten sich da gleich, mit der einschränkung, daß man eine functionexpression über let varname = function() {} auch in einen blockscope bekommt, eine functiondeclaration aber nicht

 

[Elma]

Hi. Folgendes habe ich noch herausgefunden:

Also wenn man eine Funktion im globalen Scope per var foo = function definiert, erscheint foo am Scriptanfang als "undefined". Sobald der Code die Zuweisung erreicht, ist die Funktion in der Variablen gespeichert.
Wenn ich die Funktionsdeklaration nutze, ist es sofort zugewiesen sobald das script startet.

 

[andreax]

Genau das wurde hier schon gesagt

eine functionexpression wird zur laufzeit angelegt und eine functiondeclaraion spätestens wenn die funktion in der diese funktion deklariert ist aufgerufen wird.
beim hoisting wird die vollständige functionsdeklaraion hochgezogen. damit ist eine funktion die über eine functiondeclaraion angelegt wird von anfang (der funktion in der sie deklariert wurde) an verfügbar im gegensatz zu einer functionexpression

aber es gibt auch noch selbstausführende Funktionen;
das sind die mit der Klammer drüber.

(function(){anweissung1.....})();

 

[kkapsner]

selbstausführende Funktionen;

Das ist nichts anderes als eine function expression...