Functions

Wat zijn functies?

Een functie is een herbruikbaar stuk code dat je een naam geeft. Zodra je de functie aanroept, wordt de code erin uitgevoerd.

Zonder en met functie

Stel je berekent de btw van meerdere producten. Zonder functie herhaal je steeds dezelfde code:

// Zonder functie:
const prijs1 = 100 * 1.21;
const prijs2 = 85 * 1.21;
const prijs3 = 60 * 1.21;

// Met functie:
function berekenBtw(prijs) {
  return prijs * 1.21;
}

const prijs1 = berekenBtw(100);
const prijs2 = berekenBtw(85);
const prijs3 = berekenBtw(60);

Functie declaratie

De eenvoudigste manier om een functie te maken is met het function keyword.

function begroet() {
  console.log('Hallo wereld!');
}

// Functie aanroepen:
begroet(); // "Hallo wereld!"
begroet(); // "Hallo wereld!" (nogmaals)

Parameters

Met parameters geef je informatie mee aan een functie. Je definieert ze tussen de haakjes.

function begroetPersoon(naam) {
  console.log(`Hallo ${naam}!`);
}

begroetPersoon('Jan');   // "Hallo Jan!"
begroetPersoon('Lisa');  // "Hallo Lisa!"

Meerdere parameters

function stelVoor(naam, leeftijd, stad) {
  console.log(`Ik ben ${naam}, ${leeftijd} jaar en woon in ${stad}.`);
}

stelVoor('Jan', 25, 'Amsterdam');
// "Ik ben Jan, 25 jaar en woon in Amsterdam."

Wat als je geen argument meegeeft?

function begroet(naam) {
  console.log(`Hallo ${naam}!`);
}

begroet(); // "Hallo undefined!"

Return waarde

Met return geeft een functie een waarde terug. Die waarde kun je opslaan in een variabele of direct gebruiken.

function optellen(a, b) {
  return a + b;
}

const resultaat = optellen(3, 4);
console.log(resultaat); // 7

// Of direct gebruiken:
console.log(optellen(10, 5)); // 15

Return stopt de functie

function controleerLeeftijd(leeftijd) {
  if (leeftijd < 0) {
    return 'Ongeldige leeftijd';
  }

  if (leeftijd < 18) {
    return 'Minderjarig';
  }

  return 'Volwassen';
}

console.log(controleerLeeftijd(-5)); // "Ongeldige leeftijd"
console.log(controleerLeeftijd(16)); // "Minderjarig"
console.log(controleerLeeftijd(25)); // "Volwassen"

Functies zonder return

function toonBericht(tekst) {
  console.log(tekst); // alleen een actie, geen return
}

const uitkomst = toonBericht('Hallo');
console.log(uitkomst); // undefined

Default parameters

Met default parameters geef je een standaardwaarde aan een parameter. Die wordt gebruikt als er geen argument is meegegeven.

function begroet(naam = 'bezoeker') {
  console.log(`Hallo ${naam}!`);
}

begroet('Jan');   // "Hallo Jan!"
begroet();        // "Hallo bezoeker!"

Meerdere defaults

function maakProfiel(naam = 'Onbekend', rol = 'gebruiker', actief = true) {
  return {
    naam,
    rol,
    actief
  };
}

console.log(maakProfiel('Jan', 'admin'));
// { naam: 'Jan', rol: 'admin', actief: true }

console.log(maakProfiel());
// { naam: 'Onbekend', rol: 'gebruiker', actief: true }

Default met berekening

function berekenKorting(prijs, kortingPercentage = 10) {
  const korting = prijs * (kortingPercentage / 100);
  return prijs - korting;
}

console.log(berekenKorting(100));     // 90 (10% korting)
console.log(berekenKorting(100, 20)); // 80 (20% korting)

Arrow functions

Arrow functions zijn een kortere schrijfwijze voor functies. Ze zijn de standaard in moderne JavaScript.

Vergelijking

// Gewone functie:
function optellen(a, b) {
  return a + b;
}

// Arrow function (zelfde resultaat):
const optellen = (a, b) => {
  return a + b;
}

// Arrow function (nog korter, één regel):
const optellen = (a, b) => a + b;

Varianten

// Geen parameters: lege haakjes verplicht
const zegHallo = () => console.log('Hallo!');

// Één parameter: haakjes mogen weg
const verdubbel = n => n * 2;

// Meerdere parameters: haakjes verplicht
const optellen = (a, b) => a + b;

// Meerdere regels: accolades en return verplicht
const berekenBtw = (prijs) => {
  const btw = prijs * 0.21;
  return prijs + btw;
};

Arrow functions met array methods

const getallen = [1, 2, 3, 4, 5];

const even = getallen.filter(n => n % 2 === 0);
const verdubbeld = getallen.map(n => n * 2);

console.log(even);       // [2, 4]
console.log(verdubbeld); // [2, 4, 6, 8, 10]

Scope

Scope bepaalt waar een variabele beschikbaar is. Er zijn twee soorten: globale scope en lokale (function) scope.

Globale scope

const naam = 'Jan'; // globale variabele

function toonNaam() {
  console.log(naam); // werkt! naam is globaal beschikbaar
}

toonNaam(); // "Jan"
console.log(naam); // "Jan"

Lokale scope

function maakVariabele() {
  const lokaal = 'ik ben lokaal';
  console.log(lokaal); // werkt
}

maakVariabele();
console.log(lokaal); // ERROR: lokaal is not defined

Block scope met let en const

if (true) {
  let blockVar = 'binnen blok';
  const blockConst = 'ook binnen blok';
  console.log(blockVar); // werkt
}

console.log(blockVar);   // ERROR: niet beschikbaar
console.log(blockConst); // ERROR: niet beschikbaar

Lokale variabele heeft voorrang

const kleur = 'rood'; // globaal

function schilderij() {
  const kleur = 'blauw'; // lokaal
  console.log(kleur);    // "blauw" — lokaal wint
}

schilderij();
console.log(kleur); // "rood" — globaal onveranderd

Hoisting

Hoisting is het gedrag waarbij JavaScript functiedeclaraties naar boven "verplaatst" vóór de code wordt uitgevoerd. Daardoor kun je een functie aanroepen vóórdat je hem gedeclareerd hebt.

Functiedeclaraties worden gehoist

// Aanroep vóór declaratie — werkt!
console.log(optellen(3, 4)); // 7

function optellen(a, b) {
  return a + b;
}

Arrow functions worden NIET gehoist

// Aanroep vóór declaratie — werkt NIET
console.log(aftrekken(10, 3)); // ERROR: Cannot access before initialization

const aftrekken = (a, b) => a - b;

Overzicht

Samenvatting