Unterprogramm JavaScript

Gast #4585208
Hallo Programmierer,

arbeite grad den JS Kurs bei codecademy durch. Ein Unterprogramm 
(Subroutine) wird allgemein so gelernt:
1
//im Kurs:
2
var quarter = function(number){
3
    return number / 4;
4
}

Im Tutorial bei w3schools steht aber VIEL logischer so:
1
//im online-Tutorial:
2
function quarter(number){
3
    return number / 4;
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
Moderator #4585284
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.
#4585431
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.
#4586211
Noch ein Unterschied ist, das diese Function definitions nur in 
Funktionen oder Global auftreten dürfen. Soetwas währe beispielsweise 
falsch:
1
if(1){
2
  function quarter(number){
3
    return number / 4;
4
  }
5
}

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:
1
function doSomethingWheneverYouFeelLikeIt(callback){ // <- Function definition
2
  var args = Array.prototype.slice.call(arguments,1);
3
  setTimeout(function(){ // <- Function expression
4
    alert(callback.apply(null,args));
5
  },Math.random()*1000*60);
6
}
7

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

Ab JavaScript version ES6 (ECMAScript 2015) gibt es viele 
Verbesserungen, wie den spread operator, rest arguments und arrow 
functions:
1
function doSomethingWheneverYouFeelLikeIt( callback, ...args ){ // ...args are restarguments
2
  setTimeout(
3
    () => alert(callback(...args)), // <- arrow function, ...args is spread operator
4
    Math.random() * 1000 * 60
5
  );
6
}
7

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

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 10 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.