Functies in JavaScript

Dit artikel legt functies in JavaScript uit.

YouTube Video

Functies in JavaScript

Functies in JavaScript zijn blokken herbruikbare code die worden gebruikt om specifieke taken uit te voeren. Het gebruik van functies verbetert de leesbaarheid van de code en maakt onderhoud eenvoudiger. Functies kunnen op verschillende manieren worden gedefinieerd en flexibel worden gemanipuleerd met behulp van argumenten en retourwaarden.

Manieren om Functies te Definiëren

Functie Declaratie

Functies kunnen worden gedefinieerd met behulp van het trefwoord function. Functiedeclaraties worden gehoist voordat de code wordt uitgevoerd, waardoor ze kunnen worden aangeroepen voordat ze zijn gedefinieerd.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

In dit voorbeeld wordt vanwege het aanroepen van de greet functie vóór de declaratie, Hello, Everyone en Hello, Alice weergegeven.

Functie Expressie

Functies kunnen ook worden gedefinieerd door ze toe te wijzen aan een variabele. In dit geval wordt de functie niet gehoist en kan deze alleen worden aangeroepen nadat deze is gedefinieerd.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

In dit voorbeeld wordt Hello, Bob weergegeven.

Pijlfunctie

Pijlfuncties zijn een manier om functies te definiëren met een kortere syntaxis. Ze zijn vooral handig bij het gebruik van anonieme functies (functies zonder naam). Pijlfuncties hebben ook een ander gedrag met betrekking tot het sleutelwoord this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Functies kunnen worden gedeclareerd als greet en greetShort in dit voorbeeld. Als de functie uit één regel bestaat, kun je de {} (accolades) weglaten zoals bij greetShort.

Elementen van een Functie

Argumenten

Waarden die aan een functie worden doorgegeven, worden argumenten genoemd. Door argumenten te specificeren bij het definiëren van een functie, kun je waarden doorgeven bij het aanroepen van de functie.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Standaardargumenten

U kunt een standaardwaarde speciferen als er geen waarde wordt doorgegeven aan de argumenten.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

In dit voorbeeld wordt de standaardwaarde Gast gebruikt wanneer greet() wordt aangeroepen.

Returnwaarde

U kunt een returnwaarde teruggeven vanuit een functie met behulp van het return-statement. Als er geen return-statement is, retourneert de functie undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

In dit voorbeeld retourneert greet geen waarde, dus is de returnwaarde undefined.

Anonieme Functie

Een functie zonder naam wordt een anonieme functie genoemd. Ze worden vaak gebruikt als functie-expressies of pijl-functies.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Onmiddellijk Aangeroepen Functie-uitdrukking (IIFE)

Een Onmiddellijk Aangeroepen Functie-uitdrukking (IIFE) is een functie die wordt uitgevoerd zodra deze is gedefinieerd. Het wordt meestal gebruikt om de scope te beheersen.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Het wordt uitgevoerd zodra het is gedeclareerd.

Terugroepfunctie

Het doorgeven van een functie als argument aan een andere functie, voor latere uitvoering, wordt een terugroepfunctie genoemd. Het wordt vaak gebruikt bij asynchrone verwerking en event-afhandeling.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

In dit voorbeeld wordt een functie die een waarde naar de console uitvoert doorgegeven als een terugroepfunctie.

Recursieve Functie

Het aanroepen van een functie binnen zichzelf wordt recursie genoemd, en een functie die hierdoor herhalende verwerking uitvoert wordt een recursieve functie genoemd. Een functie om een faculteit te berekenen kan bijvoorbeeld als volgt met recursie worden geïmplementeerd.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

In dit voorbeeld zal de faculteit van 5, die 120 is, worden weergegeven.

this Trefwoord

Het this dat binnen een functie wordt gebruikt, geeft aan naar welk object de functie verwijst. In een reguliere functie verwijst het naar het aanroepende object, maar in pijl-functies behoudt het de this van de scope waarin het is gedefinieerd.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

De greet van de obj-variabele wordt gedeclareerd met het sleutelwoord function. Daarom verwijst het sleutelwoord this naar het object van de obj-variabele. Aan de andere kant wordt de greet van de obj2-variabele gedeclareerd met een pijlfunctie (arrow function). Daarom verwijst het sleutelwoord this naar het object in de buitenste scope en is het undefined in dit voorbeeld.

Functiescope en Closures

Variabelen die binnen een functie zijn gedeclareerd, kunnen niet van buiten de functie worden benaderd. Dit wordt functiescope genoemd. Er is ook een functie genaamd closure die de scope behoudt op het moment dat de functie wordt gedeclareerd.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

In dit voorbeeld kan de inner-functie de variabele outerVar benaderen, omdat het de scope behoudt waarin het is gedeclareerd.

Samenvatting

• Er zijn verschillende manieren om functies te definiëren, waaronder function declarations, function expressions en arrow functions.
• Functies kunnen argumenten aannemen en waarden teruggeven.
• Er zijn speciale toepassingen, zoals callback-functies en recursieve functies.
• Er moet voorzichtig worden omgegaan met this, omdat pijlfuncties en gewone functies zich anders gedragen.
• Closures kunnen worden gebruikt om interne variabelen vanuit de buitenste scope te benaderen.

Functies zijn een van de belangrijke concepten in JavaScript en maken gebruik van de flexibele structuur.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video