JS 1.10 Higher-order functions

Table of contents

• Olika typer av funktioner
  • First class functions
  • Callback functions
  • Asynkrona funktioner
• Higher order functions
• Inbyggda higher order functions
• Referenser

Olika typer av funktioner

För att enklare förstå vad higher order functions är, så kommer en liten genomgång av de olika typer av funktioner som finns i JavaScript.

First class functions

I JS är alla funktioner s.k. first class citizens, vilket innebär att de kan behandlas som vilken variabel som helst. Funktioner kan tilldelas som värden till variabler, returneras från andra funktioner coh skickas som argument till andra funktioner. ¹

Exempel

En funktion sparad som ett värde i en variabel

const greeting = () => {
  console.log('Hello World!');
}
greeting();

Callback functions

Callback funktioner skickas till andra funktioner som argument, och anropas sen av den funktions som de har skickats till. De kallas sen när funktionen till vilken de skickades som argument kallas/invokas. ²

Exempel

Callback funktionen är den anonyma funktionen som vi skickar in i promptInput() som argument.

function promptInput(callbackFn) {
  const name = prompt('Please enter your name');
  callbackFn(name);
}

promptInput(name => console.log(`Hello ${name}!`));

Asynkrona funktioner

Typiska asynkrona funktioner har inget namn och kan inte återanvändas. De skrivs oftast när vi bara behöver utföra en grej en gång och på ett ställe. ¹

Asynkrona funktioner returnerar ett Promise, och denoteras (oftast) med nyckelorden async och await. Används ofta vid t.ex. API-anrop.

Higher order functions

Higher order functions är funktioner som tar emot andra funktioner som argument eller returnerar en funktion. ¹ Det är bland annat dessa funktioner som gör JavaScript så optimalt för funktionell programmering.

Exempel

function firstFunc(a, b) {
	return function(c) {
		return a + b + c;
	}
}

const a = firstFunc(1, 2)(3) // a == 6

Arrow function versionen, finns ofta i React, kallas där Higher-order Component (HOC):

const firstFunc = (a, b) => (c) => a + b + c;

Inbyggda higher order functions

Nedan följer några exempel på de mest användbara higher order functions inbyggda i JavaScript.

.map()

Array-metod som tar en callback-funktion som argument. För varje element i arrayen anropas funktionen, sen returneras en ny array med resultet.

const array = [1, 2, 3, 4];
const newArray = array.map(x => x * 2);

console.log(newArray); // [2, 4, 6, 8]

.filter()

Array-metod som tar en callback-funktion som argument. Callback-funktionen anropas för varje element i arrayen och returnerar en booelan. När alla element anropats returnerar .filter() en ny array med bara de element där callback-funktionen returnerat true.

const array = [1, 2, 3, 4];
const newArray = array.filter(num => num > 2);

console.log(newArray); // [3, 4]

.reduce()

Array-metod som tar en callback-funktion som argument, som sen anropas för varje element i arrayen. Callback-functionen tar två argument, dels nuvarande element och dels returvärdet från förra anropet. När .reduce() gått igenom alla element så har de reducerats till ett enda värde som sen returneras.

const array = [1, 2, 3, 4];
const callbackFn = (returnValue, currentValue) => returnValue + currentValue;

console.log(array.reduce(callbackFn)); // 10

.forEach()

Array-metod som tar en callback-funktion som argument. Callback-funktionen exekveras för varje element i arrayen. Ersätter ofta for...-loopar på ett väldigt smidigt sätt.

const array = [1, 2, 3, 4];

array.forEach(element => console.log(`${element} Mississippi`));

// '1 Mississippi'
// '2 Mississippi'
// '3 Mississippi'
// '4 Mississippi'

Referenser