Wat is Functional Programming

Functional Programmming (ook wel FP) is het proces van het bouwen van software door pure functies samen te stellen. Hiermee kan je (web-)applicaties bouwen die erg functioneel kunnen zijn in allerlei contexten. Bovendien is FP een term en tegelijk omgeving waarin je als designer/developer denkt en codeert in de termen van functies.

• Impure/pure functies
• Immutability/Mutability
• Higher Order functions

---

Impure/pure functies

Pure

Bij een 'pure' functie staat centraal dat bij het aanroepen van de functie, het resultaat juist de output is.

Code

function multiplier(circle) {
  return circle + circle;
}

circle(14);

Impure

Een 'impure' functie manipuleert een globale variabele die buiten de functie staat.
Het resultaat van zo'n functie is dan de variabele:

Code

let circle = 14;

function multiplier() {
  circle = circle + circle; 
  return circle;
}

multiplier();

Immutability/Mutability

Immutability

Het principe dat bij immutability wordt toegepast, slaat eigenlijk op het wijzigen van data. Hoewel de meeste methodes (voor arrays) dat doen, zijn er ook heel wat JavaScript frameworks die hier juist tegenin gaan. Een framework als React (waar ik mee gewerkt heb) hanteert juist een werkwijze waarin je niet gelijk de status (state) van een functie/variabele aanpast.

Mutability

Er zijn ook manieren waarmee je de originele dataset (array) wijzigt in plaats van het maken van een nieuwe dataset (array), zoals bij .map(). Kijk maar naar dit voorbeeld:

Code

let furniture = ['sofa', 'table', 'chair'];
furniture.push('TV cabinet');
console.log(furniture) // Output: ['sofa', 'table', 'chair', 'TV cabinet']

Higher Order functions

Een Higher Order function is een functie dat een functie als een argument ontvangt of een functie terugstuurt als output (return functie).

Er zijn 3 soorten Higher Order Functions:

• .map() method
• .filter() method
• .reduce() method

.map()

Deze methode maakt een nieuwe array aan door de callback-functie aan te roepen die als argument voor elk element in de invoerarray is opgegeven. Deze methode neemt elke geretourneerde waarde van de callback-functie en maakt een nieuwe array met die waarden.

Code

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);

.filter()

Deze methode maakt een nieuwe array aan met alle elementen die de test van de callback-functie doorstaan. De callback-functie die is doorgegeven aan deze methode accepteert 3 argumenten: element, index en array.

Code

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);

.reduce()

Deze methode voert de callback-functie uit op elk lid van de aanroepende array, wat resulteert in een enkele uitvoerwaarde. De reduceer methode accepteert twee parameters: (1) De reducer functie (callback), en (2) een optionele initialValue.

1. De reducer-functie (callback) accepteert vier parameters; accumulator, currentValue, currentIndex, sourceArray.

Als een initialValue is opgegeven, is de accumulator gelijk aan de initialValue en is de currentValue gelijk aan het eerste element in de array.

Als er geen initialValue is opgegeven, is de accumulator gelijk aan het eerste element in de array en is de currentValue gelijk aan het tweede element in de array.

Code (somt een reeks getallen op)

const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});
// prints 25
console.log(sum); 

Bronnen:

• https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad
• https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99