Javascript Arrow Function

Arrow-Funktionen

Arrow-Funktionen sind eine kürzere Syntax für anonyme Funktionen oder Funktions-Ausdrücke. Hat die Arrow-Funktion nur einem Parameter und eine Anweisung, kann sie als übersichtliche kurze Callback-Funktionen geschrieben werden.

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.

Arrow-Funktionen: Anonym und kompakt

Eine Arrow Function wird definiert mit einem Klammerpaar für die Liste der Parameter gefolgt von einem fetten Pfeil => und einem Paar geschweifter Klammern für den Funktionskörper mit den Anweisungen.

// wäre es mehr als ein Argument, müssten runde Klammern drumherum
let doppelt = num => num * 2;

//ist dasselbe wie 
let doppelt = num => { return num * 2 }

//ist dasselbe wie 
let doppelt = function(num) { return 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.

Kurz und kompakt: Arrow Function
(x,y) => x+y;

statt

Klassische Schreibweise
function (x,y) { 
   return 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 für 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 Functions

Das Schlüsselwort this ist alles andere als intuitiv und in inneren Funktionen läßt this Einsteiger für lange Zeit an den Nägeln kauen. ES6 verbessert this in der Arrow-Funktion durch einen lexikalischen Kontext, so dass bind(this) oder das Speichern des Kontext in let self = this nicht mehr gebraucht werden.

const student = {

  courses: ['Lineare Algebra', 
            'Semantik von Programmiersprachen', 
            'Betriebssysteme'],

  grades:  [ 2.3, 3.0, 1.7 ],

  // Such den Kurs mit der beste Note
  getBestNote: function() {
    let self = this;  // 'this' einfangen
    let bestNode = function() { 
       return Math.max(...self.grades); 
    };  
    return this.courses[this.grades.indexOf(bestNode())];
  }
};

Die Arrow-Funktion übernimmt das this vom umschließenden Scope, also vom Objekt student. Das Bestte: let self = this ist überflüssig. Das liest sich einfacher und ist schön kompakt.

ARROW function this // umgebender Kontext () => { this // an den umgebenden Kontext gebunden }