Javascript Arrow Function

Arrow-Funktionen: Anonym und kompakt

Eine Arrow Function wird definiert mit einem

• Paar runder Klammern für die Liste der Parameter
• gefolgt von einem »fetten Pfeil« => und
• einem Paar geschweifter Klammern für den Funktionskörper mit den Anweisungen.

Am Rande: Die Zeichenkombination aus Gleichheitszeichen und Größer-Zeichen wird auch als Fat Arrow bzw. Fetter Pfeil => bezeichnet.

// klassische Schreibweise 
let doppelt = function (num) {
   return num * 2;
}

// ist dasselbe wie 
let doppelt = (num) => { return num * 2 }
              ▲   ▲    ▲                ▲
              |   |    |                |
              └-┬-┘    └-------┬--------┘
                |              |
runde Klammern -┘      geschweifte Klammern

// oder kurz bei nur einem Parameter
let doppelt = num => num * 2;

Hat die Arrow-Function nur einen Parameter, können die runden Klammern weggelassen werden, und wenn die Funktion nur aus einer Anweisung besteht, muss die Anweisung auch nicht in geschweifte Klammern gesetzt werden.

function (x,y) { 
   return x+y; 
}

(x,y) => x+y;

• Eine Arrow-Funktion erzeugt keinen eigenen Ausführungskontext – anders als Funktions-Ausdrücke oder deklarative Funktionen, die ihr eigenes this je nach Aufruf erzeugen.
• Arrow-Funktionen sind anonyme Funktionen: Ihr Name ist ein leerer String.
• In einer Arrow-Funktion gibt es kein arguments-Objekt.

Beispiel: einfache Arrow-Funktionen

array.some () (ES5) prüft, ob ein Element eines Arrays einen Test besteht, hier, ob ein Element des Arrays 0 ist.

const numbers = [1, 5, 10, 0];
numbers.some (item => item === 0);
//console.log ( numbers.some (item => item === 0) );

liefert true, weil ein Element des Arrays den Wert 0 hat. Schön kurz. Am wirkungsvollsten sind kurze Arrow-Funktionen ohne Verschachteln.

this in Arrow Funktionen: lexikalische Bindung von this

Für alle diejenigen, denen das this in inneren Funktionen nie ganz geheuer ist: Arrow-Funktionen übernehmen das this (den lexikalischen Kontext) von ihrem umfassenden Block.

Dadurch entfällt das Problem, dass sich this in traditionellen Funktionen verändert (z. B. wenn sie als Callback verwendet werden).

function Timer() {
	this.seconds = 0;
	setInterval(() => {
		// Arrow-Funktion übernimmt 'this' von Timer
		this.seconds++;
		console.log(this.seconds);
	}, 1000);
}
new Timer();

Arrow Functions – Ausnahmen

Sie können nicht jede Javascript-Funktion ersetzen, sondern sind für besondere Funktionen gedacht. Arrow-Funktion können überall dort eingesetzt werden, wo ein anonymer Funktions-Ausdruck erforderlich ist (z.B. bei Callback-Funktionen wie in den Array-Methoden map(), filter(), sort().

Was Arrow-Funktionen von klassischen Funktionen unterscheidet: Sie haben keine arguments-Bindung und können nicht als Konstruktor-Funktionen eingesetzt werden, also auch nicht mit new aufgerufen werden.

Und mehr: Arrow functions dürfen keine Argument mit denselben Namen haben.

const arrowParams = (a, b, a) => {
}
SyntaxError: Duplicate parameter 'a' not allowed in an arrow function.

const arrowParams = (p1, p2) => {
	if (arguments.length == 1) {
		return "Und wo ist der Rest?";
	} 
}

const anwser = arrowParams (17,24)
ReferenceError: Can't find variable: arguments