Skip to main content

​
First-Class-Funktionen

  • Erste Klasse Bürger
  • Funktionen sind nur Werte
  • Ein anderer Typ von Objekt
So können wir z.B. die Funktion add oder increment als Variable speichern: 
const add = (a, b) => a + b;

const counter = {
  value: 23,
  inc: function() { this.value++; }
}
Ausserdem können wir mit First-Class-Funktionen Funktionen als Argumente für andere Funktionen übergeben, wie z.B. bei der Funktion addEventListener(): 
const greet = () => console.log('Hey Levin');
btnClose.addEventListener('click', greet);
Darüber hinaus können wir Funktionen als return-Value zurückgeben, das kann oftmals sehr praktisch sein. Weil Funktionen eben nur Objekte sind haben auch sie einige Methoden, beispielsweise die bind-, call - und apply-Methoden. 
counter.inc.bind(someOtherObject);

​
Higher-Order-Funktionen

  • Erhält eine andere Funktion als Argument, gibt eine neue Funktion zurück oder beides
  • Nur möglich, aufgrund von First-Class-Funktionen
Im obigen Beispiel mit der addEventListener-Funktion ist eben genau diese Funktion eine Higher-Order-Funktion, da sie eine Callback-Funktion als Argument, hier greet, erhält. Weiter können wir Funktionen haben, die Funktionen zurückgeben, z.B.: 
function count() {
    let counter = 0;
    
    return function() {
        counter++;
    }
}

​
Beispiele

const oneWord = function (str) {
  return str.replace(/ /g, '').toLowerCase();
};

const upperFirstWord = function (str) {
  const [first, ...others] = str.split(' ');
  return [first.toUpperCase(), ...others].join(' ');
};

// Higher-order function that accepts a callback
const transformer = function (str, fn) {
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);
  console.log(`Transformed by: ${fn.name}`);
};

transformer('JavaScript is the best!', upperFirstWord);
transformer('JavaScript is the best!', oneWord);

// JS uses callbacks all the time
const highFive = function () {
  console.log('🖐');
};

document.body.addEventListener('click', highFive);
['Jonas', 'Martha', 'Adam'].forEach(highFive);

// Functions returning functions
const greet = function (greeting) {
  return function (name) {
    console.log(`${greeting} ${name}`);
  };
};

const greetHey = greet('Hey'); // returns the function that takes the name
greetHey('Jonas');
greetHey('Steven');

greet('Hello')('Jonas');
Wie wir sehen können wir unsere eigenen Funktionen erstellen, die Funktionen annehmen (transformer). Aber JavaScript nutzt sehr of in ihren eigenen Funktionen Callback-Funktionen, wie addEventListener oder forEach.

​
Vorteile

  • Alle Funktionen machen genau das, was sie sagen und nicht mehr oder weniger
  • Funktionen sind wiederverwendbar
  • Es fügt eine Schicht an Abstraktion hinzu