Functies in JavaScript

Wat is een functie

Een functie maak je als je code hebt die je vaker dan 1 keer uit wilt voeren. In een functie zit vaak bepaalde logica, of algoritme om iets te controleren. Bijvoorbeeld als je van meerdere spelers wilt weten of zij ouder zijn dan 18 jaar. Dan wil je niet meerdere keren dezelfde code gebruiken.

//First we declare a changable variable for the age
let playerAge; //variable with no value.

//Function to check if player is of age
function isOldEnough() {
    let oldEnough = false;
    if (playerAge >= 18) {
        oldEnough = true;
    }

    console.log(oldEnough);
}

playerAge = 17; //Age of player
isOldEnough(); //Call the function
//In the developers console you will now see false

playerAge = 20;
isOldEnough(); //Call the same function again
//In the developers console  you will now see true

Functies met parameters/ argumenten

In bovenstaande voorbeeld maken we eerst de playerAge aan en dan roepen we de functie aan waarin die variabele weer gebruikt wordt. Maar soms is het niet zo makkelijk, bijvoorbeeld omdat er twee spelers zijn en elke heeft een eigen variabele. (const agePlayerOne en const agePlayerTwo.

In dat geval kan ik bovenstaande functie niet meer gebruiken, er is namelijk niet 1 generieke playerAge variabele die in de functie gebruikt wordt. In zo een geval roepen we een functie aan met een argument, het argument, of argumenten (het kunnen er meer dan 1 zijn).

//Two players with an age
const agePlayerOne = 17;
const agePlayerTwo = 20;

//Function to check if player is of age
function isOldEnough(playerAge) {
    let oldEnough = false;
    if (playerAge >= 18) {
        oldEnough = true;
    }

    console.log(oldEnough);
}

isOldEnough(agePlayerOne); //Call the function
//In the developers console you will now see false

isOldEnough(agePlayerTwo); //Call the function
//In the developers console  you will now see true

Parameters

We hebben nu de methode (function) iets aangepast, tussen de ronde haken staat nu een variabele age. Deze variabele werkt alleen in de functie. We noemen dit een parameter van de methode.
Methodes (functions) kunnen dus parameters hebben.
Parameters zijn variabelen die alleen in de functie te gebruiken zijn. In bovenstaand voorbeeld is age de parameter van de functie.

Argumenten

Bij het aanroepen van de methode (function) moet je deze parameters ook meegeven. Het meegeven van een parameter bij het aanroepen van een methode noem je argumenten.

Argumenten heb je nodig bij het aanroepen van methodes (functions).

In bovenstaand voorbeeld zijn agePlayerOne en daarna agePlayerTwo de argumenten bij het aanroepen van de methode (function) van isOldEnough

Do not repeat yourself (DRY)

Functies passen goed bij de methodiek om DRY te coderen, do not repeat yourself. Op het moment dat je een bepaalde delen van je code (bijna) hetzelfde schrijft. We willen code zo schoon en kort mogelijk houden.

Return waarde

Soms wil je dat een methode iets berekend, bekijkt of doorgeeft. Een methode kan ook een waarde teruggeven. Bovenstaande methode geeft in een console.log true of false, maar vaak zal je de waarde nodig hebben in verdere code.

//Two players with an age
const agePlayerOne = 17;
const agePlayerTwo = 20;

//Function to check if player is of age
function isOldEnough(playerAge) {
    let oldEnough = false;
    if (playerAge >= 18) {
        oldEnough = true;
    }

    return oldEnough; //We return true OR false
}

const playerOneIsOldEnough = isOldEnough(agePlayerOne); //false
const playerTwoIsOldEnough = isOldEnough(agePlayerTwo); //true

Jouw JavaScript

Op de MBO-SD Fiddle site kan je meer oefenen met deze stof.

Klik hier voor de MBO-SD Fiddle site