Türchen 01

Arrow Functions – Elegante Syntax für Funktionen

Seit der Einführung von ES6 (ECMAScript 2015) hat JavaScript viele nützliche Features erhalten, die das Schreiben von sauberem und effizientem Code erleichtern. Eines dieser Features sind Arrow Functions (Pfeilfunktionen), die eine kompakte und lesbare Syntax für Funktionen bieten.

Was sind Arrow Functions?

Arrow Functions sind eine neue Art, Funktionen zu schreiben. Sie verwenden eine kürzere Syntax als traditionelle Funktionsausdrücke und binden das this Schlüsselwort lexikalisch, was einige der typischen Fallstricke beim Umgang mit this vermeidet.

Syntax von Arrow Functions

Die Grundsyntax einer Arrow Function sieht wie folgt aus:

// Traditionelle Funktion
function add(a, b) {
  return a + b;
}

// Arrow Function
const add = (a, b) => {
  return a + b;
};

Für noch mehr Kürze kann man bei Arrow Functions den Funktionskörper vereinfachen:

• Implizite Rückgabe: Wenn der Funktionskörper nur einen Ausdruck enthält, können die geschweiften Klammern und das return weggelassen werden.

  const add = (a, b) => a + b;
  

• Einzelner Parameter: Bei nur einem Parameter können die Klammern um den Parameter entfallen. Es kann jedoch der besseren Lesbarkeit und der Konsistenz des Codes dienen, die Klammern auch hier zu setzen.

  const square = x => x * x;
  const square = (x) => x * x;
  

• Keine Parameter: Bei keiner Parameterübergabe werden leere Klammern verwendet.

  const greet = () => console.log('Hallo Welt!');
  

• Currying: Bei der Übergabe mehrerer einzelner Parameter durch Currying.

  const curry = a => b => c => a + b + c;
  
  Aufruf: curry(1)(2)(3);
  

Lexikalisches this Binding

Ein bedeutender Vorteil von Arrow Functions ist das lexikalische Binden von this. In traditionellen Funktionen kann der Wert von this je nach Aufrufkontext variieren. Arrow Functions hingegen übernehmen den Wert von this aus dem umgebenden Kontext.

Beispiel mit traditioneller Funktion (falsch) :

function Person() {
  this.age = 0;

  setInterval(function() {
    this.age++;
    console.log(this.age);
  }, 1000);
}

const p = new Person();
// Ausgabe: NaN, da 'this' innerhalb der Funktion nicht auf das 'Person'-Objekt verweist

Beispiel mit traditioneller Funktion (richtig) :

function Person() {
  // setzt "this" in einen Hilfswert "that", damit dieser in der "setInterval"-Methode bekannt ist.
  const that = this;

  this.age = 0;

  setInterval(function() {
    // Benutzt "that" anstelle von "this", dass hier neu gesetzt wird.
    that.age++;
    console.log(that.age);
  }, 1000);
}

const p = new Person();
// Ausgabe: 1, 2, 3, 4, 5, ... zählt das Alter jede Sekunde um 1 hoch und gibt es aus.

Lösung mit Arrow Function:

function Person() {
  this.age = 0;

  setInterval(() => {
    // Benutzt "this", da dessen Kontext nicht neu gesetzt wird.
    this.age++;
    console.log(this.age);
  }, 1000);
}

const p = new Person();
// Ausgabe: 1, 2, 3, ..., da 'this' korrekt auf das 'Person'-Objekt verweist

Praktische Anwendungsfälle

• Callback-Funktionen: Besonders nützlich bei kurzen Funktionen, die als Argumente übergeben werden.

  const numbers = [1, 2, 3];
  
  const doubled = numbers.map(n => n * 2);
  console.log(doubled); // [2, 4, 6]
  

• Promise-Ketten:

  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
  

Wichtige Hinweise

• Kein eigenes this: Arrow Functions können nicht als Konstruktoren verwendet werden und haben kein eigenes this.

  const MyFunction = () => {};
  const instance = new MyFunction(); // TypeError: MyFunction is not a constructor
  

• Nicht geeignet für Methoden in Objekten, die this verwenden:

  const calculator = {
    value: 0,
    add: (amount) => {
      this.value += amount; // 'this' verweist nicht auf 'calculator'
    }
  };
  

  In diesem Fall sollte man eine traditionelle Funktion verwenden:

  const calculator = {
    value: 0,
    add(amount) {
      this.value += amount; // 'this' verweist auf 'calculator'
    }
  };
  

Fazit

Arrow Functions sind ein mächtiges Werkzeug, um JavaScript-Code kompakter und lesbarer zu gestalten. Sie eignen sich hervorragend für kurze Funktionen und Callbacks, insbesondere wenn man das lexikalische this Binding nutzen möchte. Allerdings sollten sie mit Bedacht eingesetzt werden, da sie nicht in allen Situationen die beste Wahl sind.

Experimentiere mit Arrow Functions und entdecke, wie sie deinen Code verbessern können!