Funktionen

siehe auch molily
weitere Möglichkeiten eine Function zu definieren

Mit Funktionen kann man wieder verwendbare Codebausteine erstellen.

Funktionen werden benötigt, um Anweisungen zusammenzufassen. Bei komplexen Programmierungen wird dadurch der Code übersichtlicher.

Der Bereich zwischen den geschweifeten Klammern wird Funktionskörper genannt. Dort werden eine oder mehrere Anweisungen eingefügt. Beim Aufruf der Funktion werden diese Anweisungen ausgeführt.

Man kann für eine Funktion einen Rückgabewert bestimmen, alle anderen Funktionen liefern den Wert undefined.

Man kann eine Funktion mehrmals und an verschiedenen Stellen aufrufen. Desweiteren kann man Funktionen über Ereignisse / Events aufrufen. Events können Userinteraktionen sein, Ladenvorgänge einer Seite sein und vieles mehr. Die Aufrufe können zeitversetzt oder in Zeitschleifen immer wieder ausgeführt werden.

Deklaration der Funktion hallo

function hallo() {

alert("Hallo Welt!");

}

Aufruf der Funktion

hallo();

Bei der Namensvergabe einer Funktion gelten die gleichen Einschränkungen wie bei Variablen.

Es gib 3 Arten eine Funktion zu erstellen.

• Funktionsdeklarationn
• Funktionsausdruck
• Pfeilfunktion

Funktionsdeklaration:

function myFunction(){ Anweisung;}

Hinter das Schlüsselwort function schreibt man den selbstgewählten Namen der Funktion gefolgt von geschweiften Klammern (dazu später mehr).
Danach wird ein Codeblock mit geschweiftern Klammern erstellt.
In diesen Codeblock werden die Anweisungen eingefügt. In der Regel sind das mehrere Anweisungen.
Beim Aufruf der Funktion werden die Anweisungen der Reihe nach von oben nach unten ausgeführt.

Hoisting

Funktionen die per Funktionsdeklaration erstellt werden, werden vom Interpreter an den Anfang gesetzt. Das bedeutet, man kann sie aufrufen bevor sie deklariert sind. Das ist bei Funktionsausdrücken nicht der Fall. Man kann nicht darauf zugreifen, bevor man sie erzeugt hat.

doSomething();

function doSomething(){Anweisgung;}

Funktionsausdruck:

let myFunction = function(){Anweisung;}

Ein Funktionsausdruck kann man überall dort verwenden, wo man auch normale Ausdrücke verwenden kann oder wo der Interpreter einen Ausdruck erwartet. Man verwendet dazu üblicherweise eine anonyme Funktion, das ist eine Funktion ohne Namen.

function() {Anweisung;}

Man deklariert eine Variable und weist dieser eine anonyme Funktion zu.
Dann kann man die Funktion über den Variablennamen aufrufen genauso wie man es bei einer Funktionsdeklaration über den Funktionsnamen machen würde.

myFunction();

Die Funktion mit Funktionsausdruck kann erst aufgerufen werden, nachdem man sie deklariert hat.

Arrow Funktion / Kurzschreibweise

Seit ES6 gibt es eine Kurzschreibweise für Funktionsausdrücke, auch genannt Arrow Funktion wegen der Schreibweise =>

let myFunction = () => {Anweisung;}

Arrow Funktion können nicht als Konstruktorfunktionen genutzt werden und haben kein eigenes this.
siehe auch mediaevent /// siehe auch W3schools

Der prinzipielle Aufbau einer Arrow Funktion:

(Parameter) => {Funktionskörper}

Hat man nur eine Anweisung kann man die geschweiften Klammern weglassen. Da man hier einen Funktionsausdruck hat, kann man auch return weglassen.

let summe = (x, y) => x + y;

entspricht

let summe = function(x,y){
return x + y;
}

In den folgenden Beispielen muss der Funktionsname mit Gleichheitszeichen vorangestellt werden, z.B.:
let myFunction = () => {alert("Hello");}

Funktionsausdruck	Arrow Function	Bedeutung
function(){ alert("Hello"); }	() => {alert("Hello");}	Funktion ohne Parameter
function(){ alert( "Hallo"); }	() => alert( "Hallo");	Funktion mit nur einer Anweisung, hier kann man die geschwungenen Klammern weglassen.
function(x){ alert("Hallo" + x); }	x => {alert("Hallo" + x);}	Funktion mit nur einem Parameter, hier kann man die runden Klammern weglassen.
function(x,y){ alert(x + y); }	(x,y) =>{alert(x + y;}	Funktion mit mehreren Parametern
function(){ return "Hallo": }	() => "Hallo";	Da die Funktion als Funktionsausdruck definiert ist, kann man auch das return weglassen.

Ein Objekt in einer Arrow Function zurückgeben

Möchte man in einer Arrow Function ein Objekt zurück geben, muss dieses in normale Klammern geschrieben werde, damit die geschweiften Klammern des Objekts nicht als Funktionskörper interpretiert werden.

Funktionsausdruck

  var doglogin = function (dogname, breed, size){
      let dog={
          dogname: dogname,
          breed: breed,
          size: size
      }
      return dog;
  }
  

Arrow-Function Kurzchreibweise

  let dogLogin = (dogname, breed, size) =>
  (
      {
          dogname: dogname,
          breed: breed,
          size: size
      }
  );
  

Event

Funktionen kann man mit Events aufrufen. Es folgen ein paar Beispiele, die nicht zu empfehlen sind, da es keine Trennung von HTML und Javascript gibt.

<input type="button" value="Hallo" onClick="hallo()">

anderes Beispiel beim Laden einer Seite:

<body onLoad="hallo()" >

---

 

Javascript Tipps