Functies en scope¶

Functies zijn een van de belangrijkste bouwstenen van programmeren. Ze helpen om code overzichtelijk, herbruikbaar en begrijpelijk te maken. In deze uitleg leer je hoe functies werken in JavaScript en p5.js, hoe je ze aanroept, hoe parameters en returnwaarden werken en wat scope betekent.

Wat is een functie?¶

Een functie is een herbruikbaar blok code dat een specifieke taak uitvoert. Je kunt een functie zien als een kleine machine: je geeft invoer (parameters), de functie doet iets, en soms krijg je uitvoer (returnwaarde) terug.

Voorbeeld:

function greet(name) {
  return "Hallo, " + name + "!";
}

let boodschap = greet("Mona");
print(boodschap); // Hallo, Mona!

In p5.js kun je functies gebruiken om tekenacties te herhalen of code overzichtelijker te maken.

Voorbeeld:

function drawCircle(x, y, r) {
  ellipse(x, y, r * 2, r * 2);
}

drawCircle(50, 50, 20);

Deze functie tekent een cirkel met middelpunt (50,50) en straal 20.

Waarom functies gebruiken?¶

Functies helpen om code op te splitsen in logische onderdelen. Dat maakt het makkelijker om fouten te vinden, onderdelen te hergebruiken en complexe programma’s te begrijpen.

Zonder functie:

ellipse(30, 30, 20, 20);
ellipse(60, 30, 20, 20);
ellipse(90, 30, 20, 20);

Met functie:

function drawCircleRow(y) {
  ellipse(30, y, 20, 20);
  ellipse(60, y, 20, 20);
  ellipse(90, y, 20, 20);
}

drawCircleRow(30);

Met functies kun je de logica hergebruiken zonder code te kopiëren.

Parameters en argumenten¶

Een parameter is een naam in de functiedefinitie. Een argument is de waarde die je meegeeft als je de functie aanroept.

Voorbeeld:

function drawSquare(size) {
  rect(10, 10, size, size);
}

drawSquare(40); // size = 40

Je kunt meerdere parameters gebruiken:

function drawRect(x, y, w, h) {
  rect(x, y, w, h);
}

drawRect(20, 40, 100, 50);

Returnwaarde¶

Een functie kan een waarde teruggeven met return. Die waarde kun je gebruiken in andere berekeningen.

Voorbeeld:

function double(n) {
  return n * 2;
}

let result = double(5); // result = 10

Als een functie geen return gebruikt, geeft ze automatisch undefined terug.

Scope – waar variabelen geldig zijn¶

Scope bepaalt waar een variabele zichtbaar is in de code. In JavaScript heb je:

Globale scope: variabelen buiten functies zijn overal zichtbaar.
Lokale scope: variabelen binnen functies bestaan alleen binnen die functie.

Voorbeeld:

let colorName = "red"; // globale variabele

function setColor() {
  let colorName = "blue"; // lokale variabele
  fill(colorName);
}

setColor();
rect(0, 0, 50, 50);
// Hier blijft de globale colorName = "red"

De lokale colorName verbergt de globale variabele binnen de functie. Dit heet shadowing.

p5.js en functies¶

In p5.js gebruik je functies om te tekenen, reageren en animeren. p5 heeft zelf al functies zoals setup(), draw(), ellipse(), rect(), fill(), en background().

Je kunt ook eigen functies maken voor herhaling of structuur.

Voorbeeld:

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(220);
  drawFace(100, 100);
}

function drawFace(x, y) {
  fill(255, 220, 200);
  ellipse(x, y, 80, 80); // hoofd
  fill(0);
  ellipse(x - 20, y - 10, 10, 10); // linker oog
  ellipse(x + 20, y - 10, 10, 10); // rechter oog
}

Hier roept draw() telkens drawFace() aan – de code blijft overzichtelijk en herbruikbaar.

Arrow-functies¶

JavaScript ondersteunt ook arrow-functies, een kortere manier om functies te schrijven.

Voorbeeld:

const double = (x) => x * 2;
print(double(4)); // 8

Arrow-functies worden vaak gebruikt bij korte berekeningen of callbacks.

Veelgemaakte fouten¶

Vergeten haakjes bij aanroepen: greet is niet hetzelfde als greet().
Verwarring tussen parameter en argument.
Denken dat return automatisch iets op het scherm toont – dat moet je met print() of console.log() doen.
Variabelen in de verkeerde scope gebruiken.

Fout voorbeeld:

function setColor() {
  let c = color(255, 0, 0);
}
fill(c); // Fout: c is hier niet gedefinieerd

Goed voorbeeld:

let c;
function setColor() {
  c = color(255, 0, 0);
}
setColor();
fill(c); // Werkt

Belangrijke begrippen¶

Functie – herbruikbaar blok code dat een taak uitvoert.
Parameter – naam in de functiedefinitie.
Argument – waarde die je doorgeeft bij het aanroepen.
Return – geeft een waarde terug uit een functie.
Scope – het bereik waarin variabelen zichtbaar zijn.
Globale scope – variabelen die overal toegankelijk zijn.
Lokale scope – variabelen die alleen binnen hun functie bestaan.
Shadowing – een lokale variabele met dezelfde naam als een globale verbergt de globale.
Hoisting – functiedeclaraties worden herkend voordat ze in de code staan.
Arrow-functie – korte syntaxis voor functies: (x) => x * 2.
p5.js-functie – ingebouwde functies zoals setup(), draw(), ellipse(), rect(), fill(), random().