Die Zerlegung eines Programms in kleine, logische zusammengehörende Blöcke wird prozedurale Programmierung genannt. Eine prozedurale Programmiersprache besitzt im Rahmen ihres Sprachumfangs die Möglichkeit zur Definition sogenannter Prozeduren.

Im Sinne dieser Definition ist Javascript eine prozedurale Programmiersprache.

Javascript unterstützt mittels des reservierten Worts function das Konzept der prozeduralen Programmierung.

Eine Funktion

• stellt einen wiederverwendbaren Anweisungsblock dar.
• erhält in der Regel einen eindeutigen Namen.
• muss vor Gebrauch definiert werden.
• kann beliebig of verwendet (aufgerufen) werden.
• wird nicht automatisch, sondern nur explizit aufgerufen.
• kann einer Variablen zugewiesen werden.

Syntax

function Name(arg1, arg2, ..., argN) {
   Anweisungen;
   return wert;
}

• Die Funktionsdefinition beginnt mit reservierten Wort function.
• Es folgt der Funktionsname, dessen Schreibweise den Syntaxregeln für Variablen unterliegt ([a-zA-Z_$][a-zA-Z0-9_$]*). Fehlt der Funktionsname, dann sprechen wir hierbei von einer anonymen Function.
• Hiernach folgt ein (rundes) Klammerpaar, das eine durch Kommata getrennte Liste von Argumenten (Parameter) beinhaltet. Jedes Argument ist ein Variablenname. Die Argumentenliste kann leer sein.
• Schliesslich folgt ein Paar geschweifter Klammern, die den Funktionsrumpf oder Funktionsblock beinhalten. Dieser besteht aus einer beliebigen Anweisungsfolge. Nur hier ist die Verwendung des reservierten Worts return erlaubt, das einen sofortigen Abbruch der Anweisungsausführung bewirkt. Innerhalb des Funktionsblocks werden die Argumente wie gewöhnliche Variablen verwendet.

function Square(x) {
   return x*x;
}

function InputNumber(prompt) {
   var num;
   while (isNaN(num = parseFloat(window.prompt(prompt, ""))))
      window.alert("input valid number please!");
   return num;

var f1 = function(x) { return 2*x*x*x - 3*x*x + 4*x - 5; },
    f2 = function(x) { return 2*x*x - 3*x + 4; };

var Pkt = {
   x: 10,
   y: 12,
   len: function() { return Math.sqrt(Pkt.x*Pkt.x + Pkt.y*Pkt.y); }
};

Syntax

Name(expr1, expr2, ..., exprN)

• Der Funktionsaufruf beginnt mit dem Namen der Funktion, gefolgt von einem runden Klammerpaar.
• Als Funktionsargumente (Parameter) wird eine durch Kommata getrennte Folge von Ausdrücken zwischen das Klammerpaar gesetzt. Diese Ausdrücke werden den Argumenten in der Funktionsdefinition in der gegebenen Reihenfolge zugewiesen.
• Wird eine Funktion mit weniger Argumenten, als seitens der Funktionsdefinition erwartet, aufgerufen, erhalten die nicht vorhandenen Argumente den Wert undefined.
• Ein Funktionsaufruf setzt die Existenz einer impliziten oder expliziten Funktionsdefinition voraus. Wenn diese nicht existiert, reagiert der Interpreter mit einer Fehlermeldung (Gross-/Kleinschreibung beachten).
• Ein Funktionsaufruf stellt selbst einen Ausdruck dar und kann dort verwendet werden, wo ein Ausdruck erwartet wird.
• Bei jedem Funktionsaufruf werden die Anweisungen im Funktionsblock der Funktionsdefinition ausgeführt.
• Der Wert des Funktionsaufrufs entspricht dem return Wert. Besitzt eine Funktion keine oder eine leere return Anweisung, dann ist der Wert undefined.

function f(a,b) { return a * b; }

f(1+2, 9%5);            // 12
f(Math.sqrt(36), 6-9);  // -18
f(42);                  // NaN
typeof f(1,2);          // "number"


function f(a,b,c) { alert(""+a+b+c); }

f(1,2,3);         // "123"
f(1,2);           // "12undefined"
f(1,,3);          // syntax error
typeof f(1,2,3);  // undefined

• Variablen, die ausserhalb einer Funktion deklariert werden, heissen globale Variablen.
• Variablen, die innerhalb einer Funktion deklariert werden, heissen lokale Variablen.
• globale Variablen sind auch innerhalb einer Funktion verwendbar.
• lokale Variablen sind ausserhalb ihrer Funktion nicht definiert.
• eine lokale Variable überschreibt eine gleichnamige globale Variable.
• die Argumente einer Funktion haben alle Eigenschaften einer lokalen Variablen.

Beispiel

var x=42, y=12, gruss="Hallo", a="a";
function Test(a, b) {
   var y=24, gruss="Helau";
   alert([x,y,a,b,gruss]);
}
Test("b","c");           // 42,24,b,c,Helau

Was passiert mit dem Wert einer Variablen, die als Argument an eine Funktion übergeben und innerhalb der Funktion verändert wird?

Beispiel

var n = 42,
    w = true,
    s = "Hallo",
    arr = [1,2,3],
    pnt = {x:25, y:12};

function f(a,b,c,d,e) {
   a = 43;
   b = false;
   c = "Helau";
   d[0] = -1;
   d.push(4);
   e.x = 24;
   e.z = 0;
}

f(n,w,s,arr,pnt);

alert(n);                         // 42
alert(w);                         // true
alert(s);                         // "Hallo"
alert(d);                         // -1,2,3,4
alert(pnt.x+","+pnt.y+","+pnt.z); // 24,12,0

• Der Wert der Datentypen Number, Boolean und String wird als Kopie (by value) übergeben. Eine Änderung innerhalb der Funktion hat daher keine Auswirkung auf den Wert der originalen Variablen.
• Alle anderen Datentypen – insbesondere Array und Object – werden als Original übergeben (by reference). Eine Änderung innerhalb der Funktion wirkt sich also bleibend auf den Wert der Variablen aus.

• Funktionen können in ihrer anonymen (literalen) Schreibweise definiert und einer Variablen zugeweisen werden.
• Funktionen können als Argumente von anderen Funktionen verwendet werden.

Beispiele

var f1 = function(x) { return 2*x*x*x - 3*x*x + 4*x - 5; },
    f2 = function(x) { return 2*x*x - 3*x + 4; };

function Calculate(x, f) { return f(x); }

Calculate(2, f1);  // 7
Calculate(2, f2);  // 6

var arr = [7,4,5,12,3];
arr.sort(function(a,b){ return a-b; });  // numerisch aufsteigend

Funktionen, die sich selbst aufrufen, heissen rekursive Funktionen. Die Rekursion ist häufig eine Alterbative zur Iteration (Bearbeitung mittrls Schleife). Die Rekursion muss eine Abbruchbedingung enthalten, um eine unendliche Rekursion zu vermeiden.

Beispiel

function Faculty(n) {
   if (n > 1)
      return n*Faculty(n-1); 
   else
      return 1;
}

function Fibonacci(n) {
   if (n > 1)
      return Fibonacci(n-2) + Fibonacci(n-1);
   else
     return 1;
}

for (var i=1; i<6; i++)
   document.write(Faculty(i) + ", ");    // 1, 2, 6, 24, 120,

for (var i=0; i<5; i++)
   document.write(Fibonacci(i) + ", ");  // 1, 1, 2, 3, 5,