Functies

Schrijf eenmaal function square(n) { return n * n; } en square(4) geeft 16, square(9) geeft 81, enzovoort voor elk meegegeven getal.

Een stukje werk een naam geven

Je hebt al functies van anderen gebruikt: console.log, Math.round en toUpperCase zijn allemaal functies. Een functie is een benoemd codeblok dat één taak uitvoert. Je definieert het eenmaal en roept het daarna met zijn naam zo vaak aan als je wilt. Met functies vermijd je steeds dezelfde regels kopiëren en kun je in grotere onderdelen over een programma denken: ‘bereken de fooi, verdeel dan de rekening’ in plaats van een lange lijst berekeningen.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Ana"));   // Hello, Ana!
console.log(greet("Ji"));    // Hello, Ji!

De definitie begint met het sleutelwoord function, dan de functienaam en dan een lijst parameters tussen haakjes. Een parameter is een variabele die een waarde krijgt wanneer de functie wordt aangeroepen; hier is dat name. Het blok tussen accolades doet het werk. Als je greet("Ana") aanroept, wordt de waarde "Ana", een argument genoemd, in parameter name geplaatst en wordt het blok uitgevoerd.

return geeft een waarde terug

Het sleutelwoord return beëindigt de functie en stuurt een waarde terug naar de plek waar zij werd aangeroepen. De aanroep greet("Ana") is een expressie met de teruggegeven waarde als waarde. Daarom kan die in console.log staan, in een berekening of in een variabele worden opgeslagen: const msg = greet("Ana");.

Een waarde teruggeven en afdrukken zijn verschillende dingen, die beginners vaak verwarren. Een functie die alleen console.log aanroept, toont iets op het scherm maar geeft niets terug. De aanroep evalueert tot undefined, dus je kunt het resultaat niet in een berekening gebruiken. Laat functies in het algemeen resultaten teruggeven en laat de aanroepende code beslissen of die worden afgedrukt.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // 50
addPrint(2, 3);      // prints 5, but returns nothing usable

return stopt de functie ook meteen. Regels erna op dezelfde weg worden niet uitgevoerd. Zo kun je bijzondere gevallen vroeg afhandelen: if (n < 0) return "negative"; bovenaan een functie, met het normale geval eronder.

Meerdere parameters en standaardwaarden

Een functie kan meerdere parameters krijgen, gescheiden door komma's. Argumenten worden op volgorde gekoppeld: in add(2, 3) is a gelijk aan 2 en b aan 3. Als een aanroep een argument weglaat, is die parameter undefined. Je kunt een parameter een standaardwaarde geven die wordt gebruikt als niets wordt meegegeven: function tip(bill, rate = 0.15) gebruikt 0.15 tenzij de aanroeper een ander tarief opgeeft.

Pijlfuncties

Modern JavaScript heeft ook een kortere schrijfwijze voor kleine functies, de pijlfunctie. const square = (n) => n * n; betekent hetzelfde als de square-functie in de inleiding. Als het blok één expressie is, wordt de waarde automatisch teruggegeven, zonder accolades en zonder return. Je ziet pijlfuncties overal in moderne code.

Variabelen binnenin blijven binnenin

Parameters en variabelen die binnen een functie zijn gedeclareerd, bestaan alleen daarbinnen. Dit heet bereik, of scope. Twee verschillende functies kunnen elk een variabele total hebben zonder elkaar te storen en code buiten een functie kan haar eigen variabelen niet zien. Een functie kan variabelen lezen die erbuiten zijn gedeclareerd, maar de duidelijkste functies krijgen alles wat ze nodig hebben via parameters en geven alles terug via return, zodat je ze op zichzelf kunt begrijpen.