Functions

Intro

  • In JavaScript (en programmeren in het algemeen) moet je taken opdelen in kleine, beheersbare stukken.
     
  • In het echte leven doen we dat ook, alleen automatisch, bijvoorbeeld koffie zetten:
    1. 💧 Je vult de kan met water
    2. 🥄 Je doet de koffie in het filter
    3. 👆 Je drukt op een knop

➡️ In code moeten we deze stappen expliciet doen

Wat is een functie?

Wat is een functie?

  • Een functie is een stukje code dat een taak uitvoergt
  • Is vaak herbruikbaar
  • Het voorkomt herhaling van code
  • Maakt je script overzichtelijker 
function showForecast() {
    console.log("15°C | ☀️");
}

Wat is een functie?

  • Moet worden aangeroepen (function calling), anders gebeurt er niets
const button = document.querySelector("button");
button.addEventListener("click", showForecast);

function showForecast() {
    console.log("15°C | ☀️");
}

Functies definiëren

1. Named functions

function sayHey() {
    console.log("Hey!");
}
  • Start met het function keyword
  • Geef een unieke naam
    • Hanteer camelCasing
    • Wees beschrijvend en duidelijk
    • Gebruik een werkwoord in gebiedende wijs
  • Plaats haakjes ()
  • Plaats de code die je wilt uitvoeren tussen accolades {}

2. Arrow functions

const sayHey = () => {
    console.log("Hey!");
}


// function sayHey() {
//     console.log("Hey!");
// }
  • Kortere manier om een functie te schrijven 
  • Geen function keyword
  • Altijd als een variabele opslaan (const) 

3. Inline functions

  • Handig voor éénmalige taken
button.addEventListener("click", function() {
	console.log("Clicked!");
});
  • Kan ook met een arrow function 
button.addEventListener("click", () => {
	console.log("Clicked!");
});

Functies aanroepen

Functies callen

function sayHey() {
    console.log("Hey!");
}

sayHey(); 					// "Hey!"
  • Een functie wordt niet vanzelf uitgevoerd
  • Gebruik de naam van de functie om de functie aan te roepen

Functies callen

button.addEventListener("click", mijnFunctie);
  • Met haakjes
    • ​directe uitvoering, direct resultaat
  • Zonder haakjes ("by reference"):
    • Geeft de functie door ipv het resultaat
    • Gebruik dit in event listeners
button.addEventListener("click", mijnFunctie());

✅ By reference - Wordt enkel uitgevoerd on click

❌ By value - Wordt meteen al uitgevoerd on page load

Parameters
& arguments

Parameters

  • Functies kunnen extra waardes accepteren
  • Plaats ze tussen de haakjes() 
  • Dit kunnen verschillende soorten data types zijn
function sayHey(name) {
    console.log(`Hey, ${name}!`);
}
sayHey("Nathalia");				// "Hey, Nathalia!"
sayHey("Brahim");				// "Hey, Brahim!"

argument
De effectieve waarde van de parameter die je doorgeeft aan de functie. In dit voorbeeld een string.

parameter

Een naam van de parameter. In dit voorbeeld name.

Parameters

  • Je kan meerdere arguments meegeven
    • gescheiden door een komma ,
    • volgorde is van belang!
function showAge(age, name) {
    console.log(`${name} is ${age} jaar.`);
}

showAge(50, "Wim Soutaer");	// "Wim Soutaer is 50 jaar."

Default waardes

Soms wil je een standaardwaarde instellen voor wanneer er geen argument wordt meegegeven, maar je dit wel nodig hebt:

function greet(name = "student") {
    console.log("Good morning, " + name + "!");
}

greet("Hadise"); // Good morning, Hadise!
greet(); 		 // Good morning, student!
  • = parameter die automatisch beschikbaar is in event listeners

  • Bevat informatie over de actie, zoals:

    • ​​ingedruke toets

    • geklikte element

    • ...

Event Object in Event Listeners

// Default
button.addEventListener("click", function (event) {
  console.log("Geklikt op:", event.target);
});

Event Object in Event Listeners

// Named function
function handleClick(event) {
  console.log("Geklikt op:", event.target);
}
button.addEventListener("click", handleClick);
// Named arrow function
const handleClick = (event) => {
  console.log("Geklikt op:", event.target);
};
button.addEventListener("click", handleClick);
// Default function
button.addEventListener("click", function (event) {
  console.log("Geklikt op:", event.target);
});
// Arrow function
button.addEventListener("click", (event) => {
  console.log("Geklikt op:", event.target);
});

Return values

Return values

  • Functies kunnen gewoon iets uitvoeren...
function revealIdool2003Winner() {
  const peterPoints = 52;
  const nataliaPoints = 48;
  let winner = null;
  
  if (peterPoints > nataliaPoints ) {
    winner = "Peter";
  } else {
    winner = "Natalia";
  }
  
  document.querySelector("#winner").innerText = winner;
}

revealIdool2003Winner();

Return values

  • ...en/of kunnen ook een waarde teruggeven 
// ------------- Geeft een waarde terug -------------
function getWinner() {
  const peterPoints = 52;
  const nataliaPoints = 48;
  let winner = null;
  
  if (peterPoints > nataliaPoints ) {
    winner = "Peter";
  } else {
    winner = "Natalia";
  }
  return winner; 	
}

// ------------ Verandert iets in de DOM ------------
function revealIdool2003Winner() { 
  document.querySelector("#winner").innerText = getWinner(); 
}

revealIdool2003Winner();

Return values

  • Met het return keyword kan je een waarde teruggeven
  • Handig om
    • lange berekeningen apart uit te voeren
    • je code op te delen in afzonderlijke deeltaken 
function verdubbel(x) {
    return x * 2;
};

const resultaat = verdubbel(5);

console.log(resultaat); 		// Output: 10

Return values in Arrow functions

Kan je op één lijn schrijven:

  • Zonder de accolades {}
  • Zonder het woord return 
// Lang
const som = (a, b) => {
  return a + b;
}


// Kort
const som = (a, b) => a + b;

Hoisting

JavaScript = sequentieel

  • JavaScript voert code uit van boven naar onder
  • Bij een error, stopt de verdere uitvoering van de code, vb:
    • syntax fout
    • lege variabele
  • Je kan dus pas een variabele gebruiken, als die werd gedeclareerd:
    • op een regel erboven
    • en binnen dezelfde scope {}

#Throwback

✨Hoisting✨

  • 🔝 Vóórdat de code wordt uitgevoerd, worden gewone JavaScript functions bovenaan de file geplaatst.
  • Je kan ze oproepen, ook al wordt ze pas later gedeclareerd:
doIExist();  				// output: Yes!

function doIExist() {
    console.log("Yes!");
}

Hoisting

Dit geldt niet voor arrow functions:

doIExist();  // Error: Cannot access 'doIExist'
			 // before initialization

const doIExist = () => {
    console.log("Yes!");
}

Ingebouwde functies

Ingebouwde functies

JavaScript bevat al veel ingebouwde functies die we direct kunnen gebruiken - en al gebruikt hebben.

// DOM manipulatie
document.querySelector(".menu");    	// Zoekt element met class 'menu'
document.querySelectorAll("button"); 	// Zoekt alle button elementen

// Strings en getallen
const nummer = parseInt("42");          // Zet string om naar een getal
const randomNumber = Math.random();     // Getal tussen 0 en 1
console.log("Tekst".toUpperCase());     // "TEKST"

// Arrays
const warmFruit = ["appel", "peer"];
warmFruit.push("ananas");                // Voegt item toe aan array
console.log(lijst.length);               // Telt aantal items in array

// Data en tijd
const nu = new Date();                   // Huidige datum en tijd
console.log(nu.getFullYear());           // bv. 2025
setTimeout(() => alert("Go"), 1000);	 // Alert verschijnt na 1s