Parameter und lokale Variablen in der Funktion

HTML

<input type="button" value="red" onClick="farbe('#faa')" >

Hier wurde iin den einfachen Klammern () ein Parameter zugewiesen. Ein Parameter hat einen Namen / Bezeichner. Es ist eine Variable, welche innerhalb der Funktion Gültigkeit hat.

function meineFunktion(para1){ alert(para1); }

Der Wert des Parameters wird, beim Aufruf der Funktion zugewiesen. Diesen Wert nennt man Argument.

meineFunktion(30);

Man kann auch mehrere Parameter angeben, die mit Komma getrennt aufgeführt werden. Beim Aufruf der Funktion werden die Werte / Argumente in gleicher Reihenfolge mit Komma zugewiesen. Die Bezeichner sollten logischerweise nur einmal vergeben werden.

function meineFunktion(a, b, c){ alert(a + b * c); }

meineFunktion(20, 46, 44);

Die Funktion in unserem obigen Beispiel hat die Aufgabe, die Hintergrundfarbe der Seite zu ändern. Das wird mit der Eigenschaft des Objekts document.bgColor gemacht.
Der Farbwert soll der Parameter mit Namen farbwert sein. Die Werte dieses Parameters werden dann in den Buttons definiert.
onClick="farbe('#00FF00')"
Bei Farbzuweisungen in Javascript, sind 2 verschiedene Schreibweisen möglich: erlaubter Farbname und Hexcode wie in CSS, beides in Anführungszeichen. Jedoch in diesem Falle muß man die Regel beachten, dass man keine gleichen Anführungsstriche ineinander verschachteln darf.

<form>
<input type="button" value="red" onClick="farbe('#00FF00')" />
<input type="button" value="green" onClick="farbe('#D0D0A0')" />
<input type="button" value="grey" onClick="farbe('silver')" />
</form>

Als kleine Übung empfehle ich mit window.location ein paar verschiedene Seiten zu öffnen.

Flexible Anzahl von Argumenten

Weniger Argumente als Parameter

Es ist nicht zwingend erforderlich, beim Aufruf der Funktion jedem Parameter einen Wert zuzuweisen. Das ist in vielen anderen Programmiersprachen nicht möglich. Hierbei muss man jedoch beachten, dass die Anweisungen innerhalb der Funktion Sinn machen sollten. Die hier vorgestellten Möglichkeiten sollte man nur in Ausnahmefällen benutzen.

function hallo(pers1, pers2, pers3){ alert(pers1 + pers2 + pers3); }

hallo("Willi"); //Williundefinedundefined

Die Parameter verhalten sich innerhalb der Funktion wie Variablen, wenn man einer Varialben keinen Wert zuweist bekommt sie den Wert undefined. Das Beispiel macht also wenig Sinn, führt jedoch zu keinem Fehler.

Mehr Argumente als Parameter

Es ist sogar möglich mehr Werte anzugeben, als es Parameter gibt. Auch das führt zu keinem Fehler.

hallo("Willi", "Sabine", "Peter", "Walter", "Jan");

Die letzten beiden Werte erscheinen nicht im alert-Fenster.

arguments

Es gibt eine Möglichkeit auf alle Werte / Argumente zuzugreifen und zwar über das Schlüsselwort arguments. Das ist ein Array mit allen Argumenten.


function hallo(pers1){
for(i=0; i < arguments.length; i++){
document.write(arguments[i]);
}

	}

Aufruf der Funktion

hallo("Willi", "Sabine", "Peter", "Walter", "Jan");

Hier wird dem Parameter pers1 der Wert "Willi" zugewiesen und alle weiteren Argumente werden über das array-ähnliche Objekt arguments ausgegeben. Es ist insofern nur array ähnlich, weil hier nicht die üblichen Methoden eines Arrays zur Verfügung stehen.

rest Parameter

siehe auch Wiki

arguments ist nicht so komfortabel, da es nur arrayähnlich ist und nicht alle Array Funktionen zur Verfügung stehen. Seit Vers ES6 gibt es den Rest Parameter, damit werden alle Argumente angesprochen, für die kein Parameter erstellt wurde. Außerdem ist der Rest Parameter ein echtes Array mit allen Möglichkeiten.

Man notiert 3 Punkte gefolgt von einem selbst vergebenen Bezeichner als letzten Parameter der Funktion. Dann werden die restlichen Parameter in einem Array gesammelt und kann diese mit allen Arrayfunktionen genutzt werden.

function meineFunktion(a, b, ...restArgs){

    console.log(a);
    console.log(b);

    for(let i= 0; i < restArgs.length; i++){
        console.log(restArgs[i])
    }
}
meineFunktion(1,2,3,4,5,6, 7);

Parameter als Array

Eine andere Möglichkeit eine nicht genau definiert Anzahl von Werten zuzuweisen, ist über einen Parameter möglich, der ein Array ist. Man hat also nur einen Parameter, dem man eine flexible Anzahl von Werten zuweisen kann. Beispielsweise eine Funktion die alle Werte addiert.


function addiere(zahlen){

  let ergebnis = 0;

  for(let i=0; i < zahlen.length; i++){

  ergebnis += zahlen[i];

  }

  console.log(ergebnis);

  }
addiere([4,5,15,21]);

Parameter mit Standardwerten

Ab Version ES6 ist möglich Parametern Standardwerte zu vergeben, indem man nach dem Bezeichner ein Gleichheitszeichen mit dem Wert anhängt. Dieser Standardwert kommt nur zum Tragen, wenn das Argument nicht vergeben wurde.

function login(username, ort, passwort = 'soll keiner wissen'){
let anzeige = "User: "+username+"\nOrt: "+ort+"\nPasswort: "+passwort;
console.log(anzeige);
}
login("Lothar Kanickel", "Bumsberg");

User: Lothar Kanickel
Ort: Bumsberg
Passwort: soll keiner wissen

Lokale Variablen

Innerhalb einer Funktion kann man lokale Variablen definieren, die nur innerhalb der Funktion Gültigkeit haben. Dazu sollte unbedingt das Schlüsselwort let oder var vorangestellt werden. Macht man das nicht, überprüft das Programm, ob diese Variable schon irgendwo global definiert wurde, was zu erheblichen Performance Verlusten führt. Diese sogenannte Tiefensuche ist sehr zeitaufwändig.

function meineFunktion(){
    let z="Hallo";
    console.log(z); //"Hallo"
}
console.log(z); //Uncaught Reference Error z is not defined

In einer Funktion lassen sich auch Funktionen deklarieren, die nur innerhalb der Funktion Gültigkeit haben.

Variablen außerhalb und innerhalb

Sollte es außerhalb der Funktion eine globale Variable geben, die den gleichen Namen wie eine Variable hat, die man innerhalb der Funktion deklariert, so wird der Wert der äußeren Variablen innerhalb der Funktion "verdeckt". Das heißt der Wert der lokalen Variablen hat nur innerhalb der Funktion Gültigkeit außerhalb behält die globale Variable ihren Wert.

let a = 1;
function myfunc(){
    let a = 4;
    console.log(a); //4
}
myfunc();
console.log(a); //1

Sollte man aber die Variable die außerhalb der Funktion deklariert wurde, in der Funktion nicht erneut deklarieren sondern nur ihren Wert verändern, wird der Wert der Variablen, die außerhalb deklariert wurde verändert. Der einzige Unterschied im folgenden Script ist let in der function

let a = 1;
function myfunc(){
    a = 4;
    console.log(a); //4
}
myfunc();
console.log(a); //4

Funktion nur einmal ausführbar

Wie ich zuvor gezeigt habe kann man einer Variable, die man außerhalb einer Funktion deklariert und initalisiert, innerhalb einer Funktion einen anderen Wert zuweisen. Einer Variablen kann man auch eine Funktion zuweisen. Man nennt es den Funktionsausdruck.

In folgenden Beispiel wird der Funktionsinhalt gelöscht, so dass diese zwar öfter aufgerufen werden kann, aber keinerlei Anweisungen mehr ausgeführt werden.

var myFunc = function () {
	myFunc = function () {};
	console.log("Hallo und tschüss");
}
myFunc();
myFunc();

Das lässt sich auch mit einer Funktionsdeklaration machen

function myFunc(){
     myFunc = function(){}; 
     console.log('Guten Tag auf wiedersehen!');
}
myFunc();
myFunc();

Es gibt noch mehr Lösungen für dieses Problem. Siehe dazu diese Seite im Netz
Siehe dazu auch IIFE

Funktion innerhalb einer Funktion

Man kann in einer Funktion eine weitere Funktion deklarieren. Dann ist diese darin liegende Funktion auch nur in der Funktion aufrufbar.

function alarm(info){

    function hallo(meldung){
        console.log(meldung);
    }
    hallo(info);
}
alarm("Horch was kommt von draußen rein");
hallo("ich bin auch draußen"); //Reference Error hallo() ist not defined

Javascript Tipps