Pfeilfunktionen

Vorbemerkung: Für das Programmierprojekt sind Pfeilfunktionen optional, d.h. herkömmliche Funktionen (mit function) sind in der Regel für alle Zwecke ausreichend.

Pfeilfunktionen mit => nach der Argumentliste anstatt function stellen eine alternative Syntax für Funktionen in JavaScript dar.

Oftmals haben Pfeilfunktionen eine viel kompaktere Syntax:

// Pfeilfunktionen mit => anstatt function
const add = (a,b) => { 
  return a + b; 
};
 
const substract = (a,b) => { 
  return a - b; 
};
	
const multiply = (a,b) => { 
  return a * b; 
};
	
console.log(substract(multiply(add(6,3),2),4));
// --> 14 ( = (6+3)*2-4 )

Unterschiede zwischen Pfeilfunktionen und „herkömmlichen“ Funktionen gibt es u.a. in Bezug auf den Umgang mit this im Funktionsrumpf, siehe dazu z.B. javascript.info.

Besteht eine Pfeilfunktionen nur aus einer Zeile bzw. aus nur einer return-Anweisung, dann können die geschweiften Klammern des Funktionsrumpfes und das return weggelassen werden:

// Einzeilige Pfeilfunktionen brauchen 
// kein return und keine { }	
const add = (a,b) => a + b;
	
const substract = (a,b) => a - b;
 
const multiply = (a,b) => a * b;
	
console.log(substract(multiply(add(6,3),2),4));
// --> 14 ( = (6+3)*2-4 )

Bemerkung: Die geschweiften Klammern des Funktionsrumpfes werden aber wieder benötigt, wenn der Rückgabewert bzw. das Ergebnis der Funktion ein JavaScript-Objektliteral mit geschweiften Klammern ist.)

Falls eine Pfeilfunktion nur ein Argument bzw. einen Parameter hat, dann werden bei der Argumentliste die runden Klammern nicht gebraucht und können weggelassen werden:

const square = x => x * x;
 
const plus1000 = x => x + 1000;

Solch kompakte Schreibweise kommt häufig in der Webprogrammierung mit JavaScript oder React vor, wenn z.B. einfache Callback-Funktionen für Buttons o.ä. benötigt werden.