Parameters en argumenten

Functies kunnen parameters accepteren, dat zijn variabelen die aan de functie worden doorgegeven. Parameters worden gebruikt om de output van een functie aan te passen en kunnen een functie veelzijdiger en makkelijker herbruikbaar maken.

• Waarom parameters gebruiken?
• Wat zijn parameters?
• Mogelijke argumenten?
  • Variabele
  • Array
  • Object
  • Functies
    • Callback
• Standaard parameters
• Arguments
• Opgelet: Pass by value of Pass by reference
  • Pass by Value
  • Pass by Reference

Waarom parameters gebruiken?

• Parameters maken functies veelzijdiger.
• Parameters stellen je in staat om de output van een functie aan te passen.
• Parameters kunnen worden gebruikt om data aan een functie door te geven.

Wat zijn parameters?

Parameters zijn de variabelen die als argumenten worden gebruikt bij het aanroepen van een functie. Ze worden gebruikt om gegevens aan de functie door te geven en stellen de functie in staat deze te verwerken.

Functieparameters worden gedeclareerd binnen de haakjes van de functieverklaring. De parameters worden gescheiden door komma’s en elke parameter moet een unieke naam hebben. Het volgende voorbeeld toont een functieverklaring met twee parameters: x en y:

function sum(x, y) {
  return x + y;
}

Wanneer deze functie wordt aangeroepen, moeten er twee argumenten worden doorgegeven om de functie aan te roepen. De argumenten worden in dezelfde volgorde geplaatst als de parameters in de functieverklaring.

const result = sum(10, 20); // 10 en 20 noemen we argumenten.

console.log(result); // 30

In dit voorbeeld worden de argumenten “10” en “20” aan de functie doorgegeven. De parameter “x” krijgt de waarde “10” toegewezen en de parameter “y” krijgt de waarde “20” toegewezen. De functie kan vervolgens deze waarden gebruiken om zijn berekeningen uit te voeren.

Mogelijke argumenten?

Variabele

Het is mogelijk om een variabele als argument aan een functie door te geven. In dat geval wordt de waarde van de variabele aan de functie doorgegeven.

const a = 15;
const result = sum(a, 20);

console.log(result); // 35

Array

Het is ook mogelijk om een array als argument aan een functie door te geven. In dat geval worden de waarden in de array aan de functie doorgegeven.

let arr = [30, 20];
let result = sum(arr[0], arr[1]);

console.log(result); // 50

function makeList(items) {
  return items.join(" & ");
}

let cars = ["Volvo", "Renault", "Tesla", "Polestar"];
let result = makeList(cars);

console.log(result); // Volvo & Renault & Tesla & Polestar

Object

Het is mogelijk om een object als argument aan een functie door te geven. In dat geval worden de eigenschappen van het object aan de functie doorgegeven.

let obj = {
  x: 10,
  y: 20,
};

let resultaat = sum(obj.x, obj.y);

console.log(resultaat); // 30

Functies

Het is mogelijk om een functie als argument aan een functie door te geven.

// Functie die twee getallen optelt
function sum(x, y) {
  return x + y;
}

// Functie die twee getallen vermenigvuldigt
function multiply(x, y) {
  return x * y;
}

// Hoofdfunctie die een bewerking uitvoert op twee getallen met behulp van een meegegeven functie
function doCalculation(x, y, calculation) {
  return calculation(x, y);
}

// Gebruik van de hoofdfunctie met de optel functie als parameter
let sumResult = doCalculation(5, 3, sum);
console.log("Optelling:", sumResult); // Output: 8

// Gebruik van de hoofdfunctie met de vermenigvuldig functie als parameter
let multiplyResult = doCalculation(4, 2, multiply);
console.log("Vermenigvuldiging:", multiplyResult); // Output: 8

Callback

Definitie

Een callback-functie is een functie die wordt doorgegeven als een argument aan een andere functie en wordt uitgevoerd nadat de uitvoering van die functie is voltooid.

Het stelt je in staat om asynchrone taken te beheren, zoals het verwerken van gegevens na een bestandslading of het uitvoeren van een actie na het voltooien van een gebruikersinteractie.

function fetchData(callback) {
  // Simuleer een asynchrone taak, zoals een AJAX-verzoek
  setTimeout(function () {
    const data = "Gegevens van de server";
    callback(data); // Roep de callback-functie aan met de opgehaalde gegevens
  }, 1000);
}

// Gebruik van de callback-functie
fetchData(function (result) {
  console.log(result); // Output: Gegevens van de server
});

Standaard parameters

We kunnen een standaardwaarde toevoegen aan een parameter. Deze waarde zal gebruikt worden indien het argument niet wordt ingevuld (waarde is gelijk aan undefined).

fucntion sum(x = 1, y = 1) {
  return x + y;
};

console.log(sum(5)); // 6
console.log(sum(undefined, 8)); // 9
console.log(sum()); // 2

Arguments

“arguments” is een object dat lijkt op een array, wat betekent dat “arguments” een length-eigenschap heeft en elementen ïndexeert vanaf nul, maar het heeft niet de ingebouwde methoden van Array zoals forEach() of map(). Het kan echter worden omgezet in een echte Array, met behulp van een van de methoden slice(), Array.from(), of de spread syntax.

const args = Array.prototype.slice.call(arguments);
// or
const args = Array.from(arguments);
// or
const args = [...arguments];

Opgelet: Pass by value of Pass by reference

Pass by Value

Bij pass by value wordt er een kopie van de variabele aan de functie gegeven. Veranderingen in de kopie binnen de functie hebben geen effect op de originele variabele buiten de functie. Primitieve types in JavaScript zoals: number, string, en boolean worden op deze manier doorgegeven.

function addFive(x) {
  x = x + 5;
  console.log("Inside function:", x); // Binnen addFive wordt x verhoogd met 5 en afgedrukt als 15.
}

let number = 10;
addFive(number);
console.log("Outside function:", number); // Buiten de functie blijft number echter 10, want de wijziging heeft alleen invloed binnen de functie.

Pass by Reference

Bij pass by reference wordt niet een kopie van de variabele, maar de referentie naar de variabele doorgegeven. Dit betekent dat wijzigingen in de functie ook doorwerken naar de originele variabele. In JavaScript geldt dit voor objecten en arrays.

function addItemToArray(arr) {
  arr.push("new item");
  console.log("Inside function:", arr); // Hier wordt items doorgegeven aan addItemToArray.
}

let items = ["item1", "item2"];
addItemToArray(items);
console.log("Outside function:", items); // Omdat arr een referentie naar items is, blijft de wijziging (toevoegen van "new item") behouden buiten de functie. Het resultaat buiten de functie bevat dus ook "new item".