Bitte warten...

JavaScript: Prozeduren und Funktionen

► JavaScript-Referenz: Funktionen function

Prozeduren und Funktionen sind Codeblöcke, die nur dann ausgeführt werden, wenn sie explizit über ihren Namen aufgerufen werden (wobei die Regeln für die Benennung von Funktionen die gleichen wie bei Variablen sind). Man kann sie daher auch als Unterprogramme bezeichnen. Der Unterschied dieser beiden Formen von Unterprogrammen besteht darin, dass eine Funktion in der Regel einen oder mehrere Rückgabewerte produziert, die beispielsweise in eine Variable eingelesen werden können, die die Funktion aufgerufen hat. Der Rückgabewert wird dann mit der Anweisung return an den Aufruf zurückgegeben (für mehrere Rückgabewerte können diese als Array zurückgegeben werden). Prozeduren führen dagegen lediglich Code aus, ohne zwangsläufig einen besonderen Rückgabewert zu produzieren.

Nach dem Schlüsselwort function werden in runden Klammern die Parameter notiert, die die Funktion benötigt und die dementsprechend im Aufruf der Funktion als Argumente übergeben werden müssen. Danach folgt in geschweiften Klammern der Codeblock, der ausgeführt werden soll.

Da beide Anwendungsfälle relativ ähnlich sind, werden sie in JavaScript auch nicht gesondert behandelt und werden beide mit dem Schlüsselwort function aufgerufen. Nun ist es allerdings so, dass in JavaScript Variablen, die außerhalb von Funktionen initialisiert wurden, ohnehin global verfügbar sind (unabhängig von einer Deklaration mit var oder let) und daher häufig gar nicht explizit an die Funktion übergeben werden müssen, um dort verarbeitet zu werden. Ich persönlich habe mich aber dennoch dafür entschieden, Variablen, die veränderliche Werte enthalten können, in die Parameterliste der Funktion aufzunehmen und Konstanten dagegen nicht, wenigstens um später besser erkennen zu können, welche Variablen für die Funktion wichtig sind.

In der Parameterliste einer Funktion kann einer Variable auch ein Vorgabewert gegeben werden, der verwendet wird, wenn im Aufruf der Funktion dieses Argument weggelassen wird. Allerdings kann man nur Variablen am Ende der Liste Vorgabewerte geben, denn beim Aufruf der Funktion ein Argument am Anfang oder in der Mitte der Liste wegzulassen würde dazu führen, dass die Reihenfolge der Argumente uneindeutig wird und daher zu unerwarteten Ergebnissen führen würde.

Code kopieren
      function summe(a, b, c = 300) {
        /* Diese Funktion addiert die Parameter a, b und c.
        Wurde beim Aufruf das dritte Argument für c nicht angegeben,
        wird für diese Variabel der Wert 300 verwendet.
        Anschließend gibt sie das Ergebnis an den Aufruf zurück. */
        return a + b + c;
      }
      
      summe2 = function() {  // alternative Schreibweise
        /* Obwohl diese Funktion keine Parameter besitzt
        und im Auruf daher auch keine Argumente übergeben werden,
        kann sie dennoch das beabsichtigte Ergebnis liefern,
        da die verwendeten Variablen global verfügbar sind. */
        return a + b + c;
      };  // bei dieser Schreibweise Semikolon am Ende nicht ervgessen!

      a = 10;
      b = 5;
      c = 200;

      out = summe(a, b);
      console.log("Summe: ", out);  // Summe: 315;
      
      out = summe2();
      console.log("Summe: ", out);  // Summe: 215;

      // Beispiel für eine Prozedur:
      function zufallszahlen() {
        for (i = 1; i <= 5; i++) console.log(Math.random());
      };
      
      zufallszahlen();  // ruft die Prozedur auf

Rekursive Funktionen

Unter bestimmten Umständen will man eine Funktion aus sich selbst heraus aufrufen, beispielsweise, um in HTML eine Liste mit mehreren Ebenen zu erzeugen. Das führt zu einer rekursiven Funktion. Dabei ist aber zu beachten, dass die Anzahl der Rekursionen nicht beliebig, sondern begrenzt ist. Bei JavaScript scheint diese Grenze bei 11428 zu liegen, kann aber möglicherweise je nach Implementierung variieren. Bei Überschreitung der Grenze bricht das Skript mit einem Fehler in der Konsole ab:

Uncaught RangeError: Maximum call stack size exceeded

Mit folgender rekursiver Funktion lässt sich diese Zahl bestimmen:

Code kopieren
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>JavaScript</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <span id="debug"></span>
    <script>
      function addOne(n) {
        n++;
        document.getElementById("debug").innerHTML = n;
        addOne(n);
      }
      addOne(0);
    </script>
  </body>
</html>