Hoofdstuk 6: Functions

Functies aanroepen - functies die iets doen

Een functie is een stukje code met een naam, dat je kunt hergebruiken. In plaats van dezelfde code steeds opnieuw te schrijven, stop je de code in een functie en roep je die functie aan wanneer je hem nodig hebt.

Om een functie aan te roepen, schrijf je de naam van de functie gevolgd door haakjes ():

greet();

Sommige functies doen iets (zoals een bericht tonen), maar geven niets terug. De functie console.log() is daar een voorbeeld van - die print iets in de console maar geeft geen waarde terug.

Je hebt eigenlijk al functies gebruikt! console.log() is een functie die iets doet (tekst tonen in de console). Nu ga je leren hoe je andere functies kunt aanroepen en zelfs je eigen functies kunt maken.

In de oefeningen hieronder zijn functies al voor je gemaakt. Jij hoeft ze alleen maar aan te roepen.

Oefening 1

Roep de functie greet() aan. Deze functie toont een begroeting in de console.

Jouw code:

function greet() {
    console.log("Hallo!");
}
// Roep de functie hier aan

Oefening 2

Roep de functie showMessage() aan. Deze functie toont een bericht.

Jouw code:

function showMessage() {
    console.log("Dit is een bericht");
}
// Roep de functie hier aan

Oefening 3

Roep de functie printWelcome() twee keer aan.

Jouw code:

function printWelcome() {
    console.log("Welkom!");
}
// Roep de functie twee keer aan

Oefening 4

Roep de functie displayInfo() aan.

Jouw code:

function displayInfo() {
    console.log("JavaScript is leuk!");
}
// Roep de functie aan

Oefening 5

Roep de functie sayGoodbye() drie keer aan.

Jouw code:

function sayGoodbye() {
    console.log("Tot ziens!");
}
// Roep de functie drie keer aan

Oefening 6

Roep eerst de functie start() aan, en daarna de functie stop().

Jouw code:

function start() {
    console.log("Gestart!");
}
function stop() {
    console.log("Gestopt!");
}
// Roep beide functies aan

Oefening 7

Roep de functie celebrate() aan.

Jouw code:

function celebrate() {
    console.log("Gefeliciteerd!");
}
// Roep de functie aan

Oefening 8

Roep de functie alarm() vijf keer aan.

Jouw code:

function alarm() {
    console.log("BEEP!");
}
// Roep de functie vijf keer aan

Oefening 9

Roep eerst openDoor() aan, dan closeDoor(), dan weer openDoor().

Jouw code:

function openDoor() {
    console.log("Deur open");
}
function closeDoor() {
    console.log("Deur dicht");
}
// Roep de functies aan in de juiste volgorde

Oefening 10

Roep de functie countDown() aan.

Jouw code:

function countDown() {
    console.log("3...");
    console.log("2...");
    console.log("1...");
    console.log("Start!");
}
// Roep de functie aan

Functies aanroepen - functies die iets teruggeven

Sommige functies geven een waarde terug in plaats van alleen iets te doen. Dit noemen we de return value (returnwaarde). Een functie met een return value geeft een resultaat terug dat je kunt opslaan in een variabele of verder kunt gebruiken.

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

let resultaat = add(5, 3);  // resultaat krijgt de waarde 8
console.log(resultaat);      // Toont: 8

Het verschil:

Functies die iets doen: voeren een actie uit (zoals console.log("Hallo"))
Functies die iets teruggeven: berekenen een waarde en geven die terug (zoals add(5, 3))

Een functie met return geeft een waarde terug die je kunt opslaan of gebruiken. Zonder return doet de functie alleen iets (zoals printen) maar krijg je geen waarde terug.

Oefening 1

Roep de functie add(5, 3) aan en sla het resultaat op in een variabele som. Log som in de console.

Jouw code:

function add(a, b) {
    return a + b;
}
// Roep add aan en sla resultaat op

Oefening 2

Roep de functie multiply(4, 7) aan en sla het resultaat op in een variabele product.

Jouw code:

function multiply(a, b) {
    return a * b;
}
// Roep multiply aan en sla resultaat op

Oefening 3

Roep de functie glue("JavaScript", "Rocks") aan en sla het resultaat op in een variabele tekst. Log tekst.

Jouw code:

function glue(wordA, wordB) {
    return wordA + " " + wordB;
}
// Roep glue aan en sla resultaat op

Oefening 4

Roep de functie subtract(20, 8) aan en sla het resultaat op in een variabele verschil.

Jouw code:

function subtract(a, b) {
    return a - b;
}
// Roep subtract aan

Oefening 5

Roep de functie double(15) aan en sla het resultaat op in een variabele dubbel. Log dubbel.

Jouw code:

function double(num) {
    return num * 2;
}
// Roep double aan

Oefening 6

Roep de functie getGreeting("Anna") aan en sla het resultaat op in een variabele begroeting. Log begroeting.

Jouw code:

function getGreeting(naam) {
    return "Hallo " + naam;
}
// Roep getGreeting aan

Oefening 7

Roep add(10, 5) aan en roep daarna add(3, 7) aan. Sla beide resultaten op in variabelen resultaat1 en resultaat2.

Jouw code:

function add(a, b) {
    return a + b;
}
// Roep add twee keer aan

Oefening 8

Roep de functie divide(100, 4) aan en sla het resultaat op in een variabele uitkomst.

Jouw code:

function divide(a, b) {
    return a / b;
}
// Roep divide aan

Oefening 9

Roep multiply(5, 5) aan, sla het resultaat op in getal1. Roep dan add(getal1, 10) aan en sla dat op in getal2.

Jouw code:

function multiply(a, b) {
    return a * b;
}
function add(a, b) {
    return a + b;
}
// Roep multiply aan, dan add

Oefening 10

Roep glue("Code", "Exercise") aan en sla het resultaat op in een variabele zin. Log de lengte van zin met zin.length.

Jouw code:

function glue(wordA, wordB) {
    return wordA + " " + wordB;
}
// Roep glue aan en gebruik .length

Functies maken zonder parameters

Nu ga je leren hoe je zelf functies maakt. Een functie maak je met het keyword function, gevolgd door een naam en accolades {}:

function greet() {
    console.log("Hallo!");
}

Binnen de accolades schrijf je de code die uitgevoerd moet worden wanneer de functie wordt aangeroepen.

Functies zonder return

Een functie kan iets doen zonder iets terug te geven. Bijvoorbeeld een bericht tonen of een berekening uitvoeren zonder het resultaat terug te geven.

Oefening 1

Maak een functie sayHello() die "Hello!" in de console logt. Roep de functie aan.

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een functie showNumber() die het getal 42 in de console logt. Roep de functie aan.

Jouw code:

// Schrijf hier je code

Oefening 3

Maak een functie printLine() die drie keer "---" logt (drie aparte regels). Roep de functie aan.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak een functie displayWelcome() die "Welkom op deze website!" logt. Roep de functie twee keer aan.

Jouw code:

// Schrijf hier je code

Oefening 5

Maak een functie showInfo() die je naam logt. Roep de functie aan.

Jouw code:

// Schrijf hier je code

Functies met return

Een functie kan ook een waarde teruggeven met het keyword return. Zodra de functie een return statement bereikt, stopt de functie en geeft de waarde terug.

function getNumber() {
    return 42;
}

let num = getNumber();  // num krijgt de waarde 42

Oefening 6

Maak een functie getHello() die de string "Hello" teruggeeft (return). Roep de functie aan en sla het resultaat op in een variabele greeting.

Jouw code:

// Schrijf hier je code

Oefening 7

Maak een functie getTen() die het getal 10 teruggeeft. Roep de functie aan en sla het resultaat op in een variabele getal.

Jouw code:

// Schrijf hier je code

Oefening 8

Maak een functie getTrue() die de waarde true teruggeeft. Roep de functie aan en sla het resultaat op in een variabele antwoord.

Jouw code:

// Schrijf hier je code

Oefening 9

Maak een functie getMessage() die de string "Dit is een bericht" teruggeeft. Roep de functie aan en log het resultaat.

Jouw code:

// Schrijf hier je code

Oefening 10

Maak een functie calculate() die 5 + 5 berekent en het resultaat teruggeeft. Roep de functie aan en sla het op in een variabele som.

Jouw code:

// Schrijf hier je code

Functies maken met parameters

Parameters zijn variabelen die je aan een functie meegeeft. Hiermee kan een functie verschillende waardes verwerken.

function greet(naam) {
    console.log("Hallo " + naam);
}

greet("Anna");   // Toont: Hallo Anna
greet("Peter");  // Toont: Hallo Peter

De variabele naam is een parameter. Wanneer je de functie aanroept, geef je een waarde mee die in de parameter wordt gestopt.

Parameters maak je binnen de haakjes van de functie. Als je meerdere parameters wilt, scheid je ze met komma's: function add(a, b) { ... }

Functies met parameters zonder return

Oefening 1

Maak een functie greetPerson(naam) die "Hallo " gevolgd door de naam logt. Roep de functie aan met "Maria".

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een functie showAge(leeftijd) die "Je bent " gevolgd door de leeftijd logt. Roep aan met 25.

Jouw code:

// Schrijf hier je code

Oefening 3

Maak een functie displayNumber(num) die het getal logt. Roep de functie drie keer aan met de getallen 10, 20 en 30.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak een functie showProduct(product, prijs) die "[product] kost [prijs] euro" logt. Roep aan met "Laptop" en 599.

Jouw code:

// Schrijf hier je code

Oefening 5

Maak een functie printSum(a, b) die de som van a en b logt. Roep aan met 15 en 28.

Jouw code:

// Schrijf hier je code

Functies met parameters en return

Nu combineren we parameters én return values. De functie krijgt input (parameters) en geeft output terug (return).

Oefening 6

Maak een functie add(a, b) die de som van a en b teruggeeft. Roep aan met 7 en 8, sla op in resultaat.

Jouw code:

// Schrijf hier je code

Oefening 7

Maak een functie multiply(x, y) die x * y teruggeeft. Roep aan met 6 en 7, sla op in product.

Jouw code:

// Schrijf hier je code

Oefening 8

Maak een functie combineWords(word1, word2) die de twee woorden combineert met een spatie ertussen en teruggeeft. Roep aan met "Hello" en "World".

Jouw code:

// Schrijf hier je code

Oefening 9

Maak een functie subtract(a, b) die a - b teruggeeft. Roep aan met 100 en 35, sla op in verschil.

Jouw code:

// Schrijf hier je code

Oefening 10

Maak een functie isGroter(a, b) die true teruggeeft als a > b, anders false. Test met 10 en 5.

Jouw code:

// Schrijf hier je code

Complexere oefeningen

Nu gaan we alles combineren: functies die andere functies aanroepen, functies in loops, en meer geavanceerde toepassingen.

Oefening 1

Maak een functie double(n) die n * 2 teruggeeft. Maak een functie quadruple(n) die double(n) twee keer aanroept. Test met 5.

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een functie add(a, b) en een functie subtract(a, b). Maak een functie calculate(x, y) die add(x, y) en subtract(x, y) berekent en de som daarvan teruggeeft. Test met 10 en 5.

Jouw code:

// Schrijf hier je code

Oefening 3

Maak een functie isEven(n) die true teruggeeft als n even is (gebruik n % 2 === 0). Maak een loop die van 1 tot 5 telt en voor elk getal logt of het even is.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak een functie square(n) die n * n teruggeeft. Maak een variabele totaal met waarde 0. Gebruik een loop van 1 tot 4 om de kwadraten op te tellen bij totaal.

Jouw code:

// Schrijf hier je code

Oefening 5

Maak een functie max(a, b) die het grootste getal teruggeeft. Maak een functie maxOfThree(a, b, c) die max twee keer gebruikt om het grootste van drie getallen te vinden. Test met 5, 12, 8.

Jouw code:

// Schrijf hier je code

Oefening 6

Maak een functie greet(naam) die een begroeting teruggeeft. Maak een array namen met ["Anna", "Bob", "Clara"]. Loop door de array en log elke begroeting.

Jouw code:

// Schrijf hier je code

Oefening 7

Maak een functie factorial(n) die de faculteit berekent (n (n-1) ... * 1). Gebruik een loop. Test met 5.

Jouw code:

// Schrijf hier je code

Oefening 8

Maak een functie isPositive(n) die true teruggeeft als n > 0. Maak een functie countPositive(arr) die telt hoeveel positieve getallen in een array zitten. Test met [5, -3, 8, 0, -1, 12].

Jouw code:

// Schrijf hier je code

Oefening 9

Maak een functie add(a, b), subtract(a, b), multiply(a, b), divide(a, b). Maak een functie calculate(a, b, operation) die een bewerking uitvoert op basis van de string operation ("add", "subtract", etc.). Test met 10, 5, "multiply".

Jouw code:

// Schrijf hier je code

Oefening 10

Maak een functie sumArray(arr) die de som van alle getallen in een array teruggeeft. Maak een functie average(arr) die sumArray gebruikt om het gemiddelde te berekenen. Test met [10, 20, 30, 40].

Jouw code:

// Schrijf hier je code