Control Flow

Vaak is tijdens de uitvoering van een programma het verdere verloop afhankelijk van de evaluatie van een bepaalde waarde. Bijvoorbeeld, wanneer als het regent, loop je met een paraplu buiten. Indien we dit voorbeeld in code zouden neerschrijven, krijgen we iets zoals:

ALS weer = regen
DAN ga wandelen met paraplu
ANDERS ga wandelen

Programmeertalen beschikken vaak over structuren om dit soort situaties vlot af te handelen. We spreken over structuren voor Control Flow. De bekendste voorbeelden zijn uiteraard if, for en while. Ook JavaScript beschikt over deze drie, en nog meer. Hieronder vind je een overzicht van de belangrijkste mogelijkheden in JavaScript wat betreft control flow.

Opmerking

In onderstaande voorbeelden wordt telkens een stukje code gegeven.

If statements

Het klassieke if-statement.

If

if (p.mouseX < p.width / 2) {
  p.fill("red");
} else {
  p.fill("blue");
}

For loops

De klassieke for-loop.

for

for (let x = 0; x < p.width; x += gridSize) {
  for (let y = 0; y < p.height; y += gridSize) {
    p.fill((x + y) % 255, 100, 150);
    p.rect(x, y, gridSize, gridSize); // Draw square
  }
}

While loops

De klassieke while-loop.

while

let x = 0;
while (x < p.width) {
  p.stroke(100, 150, 255);
  p.line(x, 0, x, p.height); // Draw vertical line
  x += 20;
}

Foreach

Snelle manier om over de elementen van een lijst te itereren. Kan je zien als de eenvoudigste van een familie moeilijkere controle-structuren uit het functionele programmeren.

foreach

let positions = [50, 150, 250, 350];
positions.forEach((pos, index) => {
  p.fill(100, 150, 255);
  p.noStroke();
  p.ellipse(pos, p.height / 2, 50, 50); // Draw circle at each position
});

Switch

Kan je zien als een uitgebreide if, waarbij je verschillende cases kan instellen. Je kan hier ook een default toevoegen om de overige gevallen op te vangen.

Control FlowUser Input

switch (currentColor) {
case p.key === "1":
    p.fill("red");
    break;
case "green":
    p.fill("green");
    break;
case "blue":
    p.fill("blue");
default:
    p.fill("gray");
    break;
}

p.keyPressed = () => {
    currentColor = p.key;
    p.redraw();
};

Do-while

Doe iets zolang de while-conditie waar is. Deze controlestructuur is een variatie van de while-loop waarbij de inhoud van je while-loop één keer wordt uitgevoerd alvorens de while-conditie wordt getest.

Do-while

let radius = 150;
let x = p.width / 2;
let y = p.height / 2;
fill(rgba(0, 0, 0, 0));
do {
  p.ellipse(x, y, radius * 2, radius * 2);
  radius += 10;
  if (radius > 100) {
    radius = 10;
  }
} while (radius <= 100);

De ternaire operator

Een operator waarmee je snel tegen een booleaanse variabele of conditie een beslissing kan maken. Vorm: conditie?evalueerIndienWaar:evalueerIndienVals

Ternary

p.background(isRed ? "red" : "blue");

User Input

p.mousePressed = () => {
  isRed = !isRed; // Toggle the background color
  p.redraw();
};

Break en Continue

De sleutelwoorden break en continue kan je gebruiken om je control flow nog verder te controleren. Gebruik je meestal niet zo veel.

Break & Continue

for (let x = 0; x < p.width; x += gridSize) {
  for (let y = 0; y < p.height; y += gridSize) {
    if ((x + y) % 80 === 0) continue; // Skip specific squares
    if (x + y > 300) break; // Stop drawing when sum of coordinates exceeds 300
    p.fill((x + y) % 255, 100, 150);
    p.rect(x, y, gridSize, gridSize);
  }
}