Functies zijn “kleine code-blokken” waarin iets berekend kan worden. Zo’n code-blok is afgezonderd van de buitenwereld en wordt door de developer geschreven om een bepaalde specifieke taak uit te voeren.
Deze kleine blokken code kan je zelf schrijven en zijn een onmisbaar stuk gereedschap bij het programmeren. Een functie bestaat altijd uit een function-body waarin wordt omschreven wat er moet gebeuren in de functie. Als een function-body is aangemaakt kan de functie worden aangeroepen, dat noemen we een function-call. Een function-body mag je maar een keer aanmaken, een function-call mag je ongelimiteerd gebruiken.
Er zijn binnen Javascript drie manieren van schrijven van een functie.
Hieronder zie je hoe de drie functies aangemaakt kunnen worden.
// definitie van een klassieke functie
function classicFunction(p1, p2) {
return p1 * p2;
}
// definitie van een anonieme functie
const anonimousFunction = function(message) {
return message.toUpperCase();
}
// definitie van een arrow functie
const arrowFunction = (name, imitation) => {
return `Hallo ik ben ${name} en ik doe ${imitation} na...`;
};
// aanroep van klassieke functie, resultaat is 4
classicFunction(2, 2);
// aanroep van anonieme functie, resultaat is HELLO!
anonimousFunction("hello!");
// aanroep arrow functie, resultaat is :)
arrowFunction("Kees", "Donald Duck");
Naast functies die je zelf kan schrijven, zijn er ook tal van functies die je aangereikt krijgt. Je krijgt ze cadeau! Het zijn functies die al klaar zijn om te gebruiken binnen je code. Deze set aan functies wordt ook wel “Build-In Functions” genoemd.
// Globale functies /////////////////////////
parseInt("42"); // 42
parseFloat("3.14"); // 3.14
isNaN("abc"); // true
isFinite(100); // true
eval("2 + 2"); // 4 (af te raden)
// Wiskundige functies //////////////////////
Math.round(4.6); // 5
Math.floor(4.9); // 4
Math.ceil(4.1); // 5
Math.random(); // 0..1
Math.max(1, 5, 3); // 5
Math.sqrt(16); // 4
Math.sin(Math.PI); // ~0
// String functies ///////////////////////////
"Hello".toUpperCase(); // "HELLO"
"Hello".toLowerCase(); // "hello"
"abc".includes("b"); // true
"abc".indexOf("c"); // 2
" a b ".trim(); // "a b"
"one,two".split(","); // ["one", "two"]
// Array functies ////////////////////////////
[1, 2, 3].push(4); // [1,2,3,4]
[1, 2, 3].pop(); // 3
[1, 2, 3].map(x => x * 2); // [2,4,6]
[1, 2, 3].filter(x => x > 1); // [2,3]
[1, 2, 3].reduce((a,b)=>a+b, 0); // 6
[1, 2, 3].forEach(x => console.log(x));
// Object functies /////////////////////////
Object.keys({a:1, b:2}); // ["a", "b"]
Object.values({a:1, b:2}); // [1, 2]
Object.entries({a:1, b:2}); // [["a",1], ["b",2]]
Object.assign({}, a, b); // object merge
Object.freeze(obj); // immutable
// Number functies ////////////////////////
Number.isInteger(5); // true
Number.isNaN(NaN); // true
(3.14159).toFixed(2); // "3.14"
// Datum functies /////////////////////////
const now = new Date();
now.getFullYear(); // 2025
now.getTime(); // milliseconds since epoch
Date.now(); // idem
// JSON functies /////////////////////////
JSON.stringify({x:1}); // '{"x":1}'
JSON.parse('{"x":1}'); // { x: 1 }
// Browser-specifieke functies
setTimeout(() => {}, 1000);
setInterval(() => {}, 16);
requestAnimationFrame(loop);
fetch("/api/data");
console.log("debug");