⚙️ Functies

⏱ Geschatte leestijd: 25 minuten · 7 stappen

In de vorige les gebruikte je loops om code te herhalen. Nu ga je functies schrijven: herbruikbare blokken code die je op elk moment kunt aanroepen. Functies zijn het fundament van gestructureerd programmeren in JavaScript.

1 Function declaration

Wat betekent dit?

Een function declaration heeft de vorm function naam(param1, param2) { return ...; }. Met return geef je een waarde terug aan de aanroeper. Zonder return geeft de functie undefined terug. Functies die je zo declareert worden gehoist: je mag ze al aanroepen vóór ze in de code staan.

Function declaration

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

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

// Aanroep vóór definitie werkt ook
console.log(groeten('Lisa')); // Hallo, Lisa!

function groeten(naam) {
  return 'Hallo, ' + naam + '!';
}

💡 Tip: Gebruik altijd return als je een waarde wilt terugkrijgen. Een functie zonder return is nuttig voor bijeffecten (zoals iets loggen), maar niet om mee te rekenen.

2 Parameters en return

Een functie kan meerdere parameters hebben. return stopt de uitvoering van de functie direct — code erna wordt niet meer uitgevoerd.

Parameters en return

function beschrijf(naam, leeftijd, stad) {
  if (leeftijd < 0) {
    return 'Ongeldige leeftijd'; // stopt hier
  }
  return naam + ' is ' + leeftijd + ' jaar en woont in ' + stad;
}

console.log(beschrijf('Sara', 21, 'Utrecht'));
// Sara is 21 jaar en woont in Utrecht

console.log(beschrijf('Tom', -5, 'Leiden'));
// Ongeldige leeftijd

// Functie zonder return
function logInfo(tekst) {
  console.log('[INFO] ' + tekst);
  // geeft undefined terug
}
const x = logInfo('test');
console.log(x); // undefined

3 Arrow functions

Moderne syntax

Arrow functions (=>) zijn een kortere schrijfwijze. Bij één expressie mag je de {} en return weglaten. Bij meerdere regels gebruik je een blok-body met return.

Traditioneel

function kwadraat(n) {
  return n * n;
}

function groet(naam) {
  return 'Hoi ' + naam;
}

Arrow function

const kwadraat = n => n * n;

const groet = naam => 'Hoi ' + naam;

// met blok-body:
const som = (a, b) => {
  const res = a + b;
  return res;
};

💡 Tip: Arrow functions worden niet gehoist. Je moet ze definiëren vóór je ze gebruikt. In moderne JavaScript-code zie je ze overal — zeker als callback bij .map() en .filter().

4 Default parameters

Met default parameters geef je een parameter een standaardwaarde. Als de aanroeper geen argument meegeeft (of undefined meegeeft), wordt de standaardwaarde gebruikt.

Default parameters

function groet(naam = 'gast', taal = 'nl') {
  if (taal === 'nl') return 'Hallo, ' + naam + '!';
  return 'Hello, ' + naam + '!';
}

console.log(groet());              // Hallo, gast!
console.log(groet('Sara'));        // Hallo, Sara!
console.log(groet('Sara', 'en')); // Hello, Sara!

// Arrow function met default
const macht = (basis, exp = 2) => basis ** exp;
console.log(macht(3));    // 9  (3²)
console.log(macht(2, 8)); // 256 (2⁸)

5 Scope

Wat is scope?

Variabelen die je binnen een functie declareert (let of const) zijn alleen zichtbaar binnen die functie. Dit heet local scope. Variabelen buiten een functie zijn overal zichtbaar (global scope), maar gebruik dat spaarzaam.

Scope voorbeeld

const naam = 'Global'; // global scope

function testScope() {
  const naam = 'Local'; // local scope — schaduwt de global
  const geheim = 42;
  console.log(naam);   // Local
  console.log(geheim); // 42
}

testScope();
console.log(naam);    // Global
// console.log(geheim); // ReferenceError: geheim is not defined

💡 Goed gebruik: Houd variabelen zo lokaal mogelijk. Zo voorkom je ongewenste bijeffecten en zijn functies makkelijker te begrijpen en te testen.

6 Oefening 1: BMI-berekening

Opdracht:

Schrijf een functie berekenBMI(gewicht, lengte) die het BMI berekent: gewicht gedeeld door lengte in het kwadraat. Rond het resultaat af op 1 decimaal. Log het resultaat voor gewicht 70 kg en lengte 1,75 m.

✓ Gebruik function of een arrow function

✓ Gebruik / voor deling en ** of * voor kwadraat

✓ Gebruik Math.round of .toFixed(1) voor afronding

editor

// Schrijf hier de functie berekenBMI(gewicht, lengte)

Console output

7 Eindopdracht: Rekenmachine

Combineer alles:

Schrijf vier functies: optellen(a, b), aftrekken(a, b), vermenigvuldigen(a, b), en bereken(a, operator, b). De laatste roept op basis van de operator-string ('+', '-', '*') de juiste functie aan. Log de resultaten van drie aanroepen.

✓ Vier functiedefinities aanwezig

✓ Parameter operator aanwezig in bereken

✓ Gebruik === voor vergelijking

✓ Log bereken(10, '+', 5), bereken(10, '-', 3), bereken(4, '*', 6)

editor

// Schrijf hier optellen, aftrekken, vermenigvuldigen en bereken

Console output

📄 Volledig voorbeeld: functies.js

// Function declaration
function begroet(naam = 'gast') {
  return 'Hallo, ' + naam + '!';
}
console.log(begroet());       // Hallo, gast!
console.log(begroet('Sara')); // Hallo, Sara!

// Arrow function
const kwadraat = n => n * n;
console.log(kwadraat(5)); // 25

// Meerdere parameters en return
function berekenBMI(gewicht, lengte) {
  return Math.round((gewicht / (lengte * lengte)) * 10) / 10;
}
console.log(berekenBMI(70, 1.75)); // 22.9

// Scope
function testScope() {
  const lokaal = 'alleen hier zichtbaar';
  console.log(lokaal);
}
testScope();
// console.log(lokaal); // ReferenceError

// Rekenmachine
function optellen(a, b)          { return a + b; }
function aftrekken(a, b)         { return a - b; }
function vermenigvuldigen(a, b)  { return a * b; }

function bereken(a, operator, b) {
  if (operator === '+') return optellen(a, b);
  if (operator === '-') return aftrekken(a, b);
  if (operator === '*') return vermenigvuldigen(a, b);
  return 'Onbekende operator';
}

console.log(bereken(10, '+', 5));  // 15
console.log(bereken(10, '-', 3));  // 7
console.log(bereken(4,  '*', 6));  // 24

← Les 4 Les 6 →