Functies in JavaScript: declaratie, parameters en arrow functions

In het vorige hoofdstuk heb je gezien hoe je met loops en stuurinstructies het verloop van je code bepaalt. In dit deel van de tutorial kijken we naar een ander belangrijk onderdeel van JavaScript: functies.

Een functie is een blok code dat je op elk moment kunt uitvoeren. Zo beschrijf je een taak één keer en voer je hem zo vaak uit als je wilt, zonder de code opnieuw te schrijven. Dat levert efficiëntere code op die je later makkelijker onderhoudt.

Dit is wat er bij het schrijven van functies in JavaScript komt kijken:

• Functies declareren
• Argumenten en parameters
• De returnwaarde van een functie
• Arrow functions

Functies declareren

Je declareert een functie in JavaScript op twee manieren: als functiedeclaratie of als functie-expressie.

Functiedeclaratie

function maFonction() {
  // uit te voeren code
}

Functie-expressie

const maFonction = function() {
  // uit te voeren code
}

Argumenten en parameters

Argumenten zijn de waarden die je bij het aanroepen aan een functie meegeeft. Parameters zijn de variabelen uit de functiedeclaratie waarin die argumenten terechtkomen.

Dit is een functie met één parameter en één argument:

function maFonction(parametre) {
  console.log(parametre);
}

maFonction('Bonjour'); // toont 'Bonjour' in de console

De returnwaarde van een functie

Een functie kan met de instructie ‘return’ een waarde teruggeven. Geeft een functie niets terug, dan is haar returnwaarde ‘undefined’.

function maFonction() {
  return 'Bonjour';
}

console.log(maFonction()); // toont 'Bonjour' in de console

Je kunt ook meerdere waarden tegelijk teruggeven, via een object of een array:

function maFonction() {
  return {
    message: 'Bonjour',
    nombre: 42
  };
}

console.log(maFonction());
// toont { message: 'Bonjour', nombre: 42 } in de console

function maFonction() {
  return [1, 2, 3];
}

console.log(maFonction()); // toont [1, 2, 3] in de console

Zodra je de instructie ‘return’ gebruikt, stopt de functie meteen en wordt de code die erop volgt niet meer uitgevoerd. Dit voorbeeld laat dat zien:

function maFonction() {
  return 'Bonjour';
  console.log('Ce message ne sera jamais affiché');
}

console.log(maFonction()); // toont 'Bonjour' in de console

Arrow functions

Arrow functions zijn een beknoptere manier om functies in JavaScript te schrijven. Ze komen vooral van pas bij eenvoudige functies die geen volledig functielichaam nodig hebben.

const maFonction = () => {
  // uit te voeren code
};

Als het functielichaam uit één expressie bestaat, kun je de accolades en het sleutelwoord return weglaten: de waarde van de expressie wordt teruggegeven. De haakjes blijven daarentegen verplicht wanneer de functie geen parameter heeft:

const maFonction = () => console.log('Bonjour');

Conclusie

Functies zijn een kernonderdeel van JavaScript en onmisbaar voor code die efficiënt blijft en makkelijk te onderhouden is. Met functiedeclaraties, argumenten en parameters, returnwaarden en arrow functions in de vingers schrijf je krachtige, bruikbare functies voor je applicaties.

In het volgende hoofdstuk kijken we naar een ander belangrijk begrip in JavaScript: objecten. Je ziet hoe je objecten maakt en gebruikt om data gestructureerd op te slaan en te bewerken.