Unterprogramm JavaScript

[Christian M. (Gast)]

Hallo Programmierer,

arbeite grad den JS Kurs bei codecademy durch. Ein Unterprogramm 
(Subroutine) wird allgemein so gelernt:

//im Kurs:
var quarter = function(number){
    return number / 4;
}

Im Tutorial bei w3schools steht aber VIEL logischer so:

//im online-Tutorial:
function quarter(number){
    return number / 4;
}

Funktionieren tut Beides, aber ist das Erstere denn logisch? Was wird 
mit "var" deklariert? Die Variable "number"? Eher. Der Name "quarter"? 
Wohl kaum!

Gruss Chregu

[Yalu X. (yalu) (Moderator)]

Im zweiten Beispiel ist "function ..." eine Anweisung, die die Funktion
quarter definiert. Das ist IMHO der normale Weg, eine Funktion zu
definieren.

Im ersten Beispiel ist "function ..." ein Ausdruck, der als Ergebnis
eine anonyme Funktion liefert. Diese Funktion wird der Variable
quarter zugeweisen. Auf diese Variable bezieht sich auch das
Schlüsselwort var. Sie entspricht in etwa einem Funktionszeiger in C.

Anonyme Funktionen werden normalerweise nicht einer Variablen
zugeweisen, sondern bspw. als Funktionsargument an andere Funktionen
übergeben, die die anonyme Funktion ihrerseits als Callback aufrufen.
Solche anonymen Funktion werden in anderen Programmiersprachen auch als
Lambda-Ausdrücke oder – zusammen mit einem damit verknüpften
Ausführungskontext – als Closure bezeichnet (falls dir einer dieser
Begriffe vielleicht schon geläufig ist).

In beiden Fällen kann die Funktion mit "quarter(x)" aufgerufen werden.

Im zweiten Beispiel kann die Funktion schon vor ihrer Definition
aufgerufen werden, da Funktionsdefinitionen "hoisted", also automatisch
im Quellcode nach oben geschoben werden.

Im ersten Beispiel hingegen ist die Variable f vor ihrer Zuweisung
undefined.

[Jan H. (j_hansen)]

Christian M. schrieb:
> Was wird mit "var" deklariert? Die Variable "number"? Eher. Der Name
> "quarter"? Wohl kaum!

Die Funktion selbst. Funktionen sind in JavaScript First Class Citizens, 
können also genau wie Zahlenwerte oder Zeichenketten Variablen 
zugewiesen und anderen Funktionen als Argument übergeben werden. Das ist 
etwas gewöhnungsbedürftig, aber bei Javascript recht wichtig. Auch, weil 
man damit nett asynchron programmieren kann.

[Daniel A. (daniel-a)]

Noch ein Unterschied ist, das diese Function definitions nur in 
Funktionen oder Global auftreten dürfen. Soetwas währe beispielsweise 
falsch:

if(1){
  function quarter(number){
    return number / 4;
  }
}

Ich empfehle am Anfang aller JS Dateien "use strict"; hinzuschreiben, 
damit soetws einen Fehler produziert.

Funktion expressions können hingegen überal stehen, wo sonstige 
Expressions stehen. Diese werden auch gerne für Callback funktionen 
verwendet:

function doSomethingWheneverYouFeelLikeIt(callback){ // <- Function definition
  var args = Array.prototype.slice.call(arguments,1);
  setTimeout(function(){ // <- Function expression
    alert(callback.apply(null,args));
  },Math.random()*1000*60);
}

doSomethingWheneverYouFeelLikeIt(function quarter(number){ // <- function expression
  return number / 4;
},20);

Ab JavaScript version ES6 (ECMAScript 2015) gibt es viele 
Verbesserungen, wie den spread operator, rest arguments und arrow 
functions:

function doSomethingWheneverYouFeelLikeIt( callback, ...args ){ // ...args are restarguments
  setTimeout(
    () => alert(callback(...args)), // <- arrow function, ...args is spread operator
    Math.random() * 1000 * 60
  );
}

doSomethingWheneverYouFeelLikeIt( x=>x/4, 20 ); // x=>x/4 is a arrow function