JavaScript-functies. Deel 7 JavaScript-cursus van Beginner tot Gevorderd in 10 blogposts

Dit is deel 7 van de JavaScript blogpostserie die je van beginner naar gevorderde zal brengen. Aan het einde van deze serie weet je alle basisprincipes die je moet kennen om te beginnen met coderen in JavaScript. Zonder verder oponthoud, laten we beginnen met de zevende tutorial.

JavaScript functies – inhoudsopgave:

1. Soorten JavaScript functies
2. Pure functies in JavaScript

Tot nu toe hebben we vrij belangrijke aspecten van JavaScript gezien, samen met enkele van de meest voorkomende best practices voor coderen die we zouden moeten volgen. Deze zogenaamde praktijken zijn er met een reden en terwijl we ze gebruiken, zullen ze ons veel fouten en frustratie besparen die we anders zouden tegenkomen. Een van de best practices die we hebben gezien, was het volgen van het DRY-principe, dat in wezen zei: Herhaal jezelf niet. Een manier waarop we dit principe toepasten, was door loops in ons programma te gebruiken, meer specifiek “for loops” die ons veel tijd en code bespaarden. In deze tutorial zullen we een ander belangrijk bouwblok in programmeren zien, en dat heet “functies”.

Soorten JavaScript functies

Functies zijn extreem gebruikelijk in programmeren, en dit geldt ook voor JavaScript. In feite zijn ze zo gebruikelijk dat sommige JavaScript-frameworks zoals React zijn gebouwd rond het benutten van JavaScript-functies als een fundamenteel bouwblok voor het creëren van de front-end van websites. En ze deden dit met een goede reden. JavaScript-functies bieden een hoge flexibiliteit, terwijl ze zeer voorspelbare en modulaire code bieden. En dat resulteert in veel duidelijkere code met minder herhalingen en veel minder fouten. Een van de eerste dingen die je moet weten over functies is dat er twee hoofdtypen functies zijn. Namelijk “pure functies” en “impure functies”. Over het algemeen willen we pure functies gebruiken waar we kunnen, zoveel mogelijk. Pure functies bieden meerdere voordelen die het veel gemakkelijker maken om mee te werken in vergelijking met impure functies. Laten we eerst pure JavaScript-functies bekijken en daarna ook in impure functies duiken.

Pure functies in JavaScript

Pure functies zijn in wezen functies die bepaalde regels volgen. En omdat ze die regels volgen, zijn ze zeer voorspelbaar, gemakkelijker te debuggen in een groter systeem, modulair, samen met enkele andere voordelen.

Een pure functie ontvangt enige invoer en retourneert enige uitvoer. Het wijzigt de invoer niet direct of het interageert op geen andere manier met de omgeving. Dat gezegd hebbende, het stuurt je geen waarschuwingen, geeft je een verklaring terwijl het iets anders doet, of het interageert op geen andere manier met zijn omgeving.

Op deze manier weet je wanneer je met een pure functie werkt dat, ongeacht waar je je code uitvoert of wanneer je je code uitvoert, zolang je dezelfde invoer geeft, je dezelfde uitvoer zult krijgen. Laten we dat zien met enkele voorbeelden.

// verdubbel het initiële nummer
function double(num){
    return num * 2;
}

// verdrievoudig het initiële nummer
function triple(num){
    return num * 3;
}

// voeg 100 toe aan het initiële nummer
function add100(num){
    return num + 100;
}

// voeg twee nummers toe
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// vermenigvuldig twee nummers
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Al deze JavaScript-functies hierboven zijn pure functies. Bij nader inzien heb je misschien het patroon gezien dat we gebruiken bij het maken van pure functies. De eerste stap is dat we het sleutelwoord “function” schrijven om JavaScript te vertellen dat we een functie willen definiëren.

Vervolgens geven we de functie een naam, bij voorkeur moet deze naam kort zijn, maar toch beschrijvend genoeg voor iemand die langskomt om te begrijpen wat de functie doet. Bijvoorbeeld, als we 100 aan een nummer toevoegen, kunnen we de functie “add100” noemen, als we een nummer verdubbelen, kunnen we de functie “double” noemen, enzovoort.

Zodra we de functie op de juiste manier hebben genoemd, is de volgende stap om het enkele invoer te geven. We geven de invoer binnen haakjes en als we meerdere invoer hebben, scheiden we ze met een komma. Net zoals we deden bij de “multiplyTwoNums” functie. (Ook, als een zijopmerking, worden nummers vaak aangeduid als “nums” voor kort in programmeren, dus als we een functie benoemen, kunnen we die algemene kennis gebruiken om korte maar beschrijvende functienamen te hebben.)

De invoer die we aan de functie geven, wordt ook vaak aangeduid als “parameters”, wanneer we de JavaScript-functies maken, beslissen we hoeveel parameters de functie zal hebben. Wanneer we besluiten de functie te gebruiken, geven we die parameters “waarden”. Die waarden die we geven bij het gebruik van de functie worden ook vaak aangeduid als “argumenten”. Dus wanneer we een invoer voor de functie geven, wordt dit proces ook wel “argumenten doorgeven” aan een functie genoemd. Laten we enkele voorbeelden daarvan bekijken.

// laten we eerst de functie definiëren die een nummer neemt 
// en het met 10 vermenigvuldigt
function multiplyBy10(num1){
    return num1 * 10;
}

// laten we nu die functie aanroepen
// sla het resultaat op in een constante
// en toon de resultaten
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 is hier de parameter.
// we hebben de waarde 3 als argument aan de functie doorgegeven.
// we hebben de resultaten van de functie opgeslagen
// in een constante genaamd bigNum.
// we hebben de constante genaamd bigNum aan de gebruiker getoond.

Zoals je in de bovenstaande code zag, zelfs wanneer we iets aan de gebruiker willen tonen, houden we de functie gescheiden van de alertfunctie. Als we de resultaten aan de gebruiker binnen de functie zouden tonen, zou dit vereisen dat de functie met andere delen van de computer interageert en zou het onze functie impuur maken. Dus over het algemeen willen we de functies gebruiken om ze invoer te geven en een geretourneerde waarde te verwachten. Wanneer we die geretourneerde waarde krijgen, kunnen we deze daadwerkelijk tonen of andere JavaScript-functies ermee uitvoeren, afhankelijk van onze behoeften, maar het punt is dat we de zorgen over het tonen van de resultaten en het berekenen van de resultaten gescheiden houden.

Dus tot nu toe hebben we gezien dat we het sleutelwoord “function” kunnen gebruiken om te beginnen met het declareren van de functie, dan geven we de functie een geschikte naam, dan openen en sluiten we haakjes en vertellen we de functie welke parameters deze nodig heeft, dan openen we accolades en vertellen we de functie wat we willen dat deze doet, zodra we tot een resultaat komen, retourneren we dat resultaat met het sleutelwoord “return”. En dan sluiten we de accolades. Al deze stappen waren vereist om een pure functie te definiëren. Nu we een functie hebben, kunnen we een functie in andere delen van ons programma gebruiken. Het gebruik van een functie wordt vaak aangeduid als “een functie aanroepen”.

Een functie aanroepen is veel eenvoudiger dan de functie declareren. Om een functie aan te roepen, kunnen we de naam gebruiken, haakjes openen, enkele argumenten doorgeven en de haakjes sluiten. Wanneer we dit doen, zal de functie ons de geretourneerde waarde geven die we hebben gedefinieerd. Afhankelijk van wat we met die geretourneerde waarde willen doen, kunnen we deze aan een variabele of constante toewijzen, we kunnen er zelfs meer berekeningen mee uitvoeren, we kunnen deze naar andere computers sturen, of we kunnen de resultaten ook direct tonen. Laten we enkele voorbeelden daarvan bekijken.

// laten we beginnen met een functie die twee argumenten neemt
// vermenigvuldigt ze en retourneert het resultaat.
// we kunnen ofwel direct het resultaat retourneren,
// of we kunnen tijdelijk een constante maken 
// en die constante ook retourneren.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// de twee functies hierboven geven ons exact hetzelfde resultaat
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// we kunnen de gelijkheid van de functie resultaten controleren 
// met een andere functie
function checkEquality(number1, number2){
    return number1 === number2;
// als de resultaten van beide functies hetzelfde zijn,
// zal de checkEquality functie “waar” retourneren 
// als een booleaanse datatype
const isEqual = checkEquality(result1, result2);
// nu kunnen we die booleaanse waarde gebruiken om een bericht te tonen
if (isEqual){
    alert("Beide geven hetzelfde resultaat!");
} else {
   alert("Ze zijn niet hetzelfde!");
}

Het uitvoeren van de bovenstaande code in Chrome Snippets zou ons het volgende resultaat geven:

Tot nu toe hebben we met pure functies gewerkt, en dit is meestal wat we het grootste deel van de tijd willen coderen. Maar dat betekent niet dat je alleen met pure functies zult werken. Zodra je een begrip hebt van de pure functies, zijn impure functies relatief gemakkelijker. Wanneer we een functie definiëren of declareren, hoeven we na het gebruik van de functienaam, deze eigenlijk geen parameters door te geven. In dat geval laten we de haakjes leeg, we hoeven ook niets van de functie te retourneren.

Nog meer, aangezien we elke code binnen de accolades van een functie kunnen schrijven, kunnen we interageren met de buitenwereld, gegevens verzenden en ontvangen, bestaande gegevens wijzigen, waarschuwingen tonen, enzovoort. Dit alles is niet verboden, en het toevoegen van console.log-verklaringen tijdens het ontwikkelingsproces van de code kan eigenlijk heel nuttig zijn. Daarom blijven we niet direct weg van impure functies, maar omdat ze veel wrijving en fouten in de code kunnen veroorzaken, inclusief het moeilijker maken van je code om te testen, zullen we proberen taken zoveel mogelijk in pure JavaScript-functies te scheiden. Zelfs wanneer we onze functies impuur maken door waarschuwingen of console.log-verklaringen toe te voegen, willen we ze meestal uit onze code verwijderen, hetzij door ze te verwijderen of door ze uit te commentariëren.

Laten we enkele voorbeelden daarvan bekijken.

// begroet de gebruiker met een impure functie
// het neemt geen argumenten en geeft geen retour
// het interageert ook met de buitenwereld door 
// een waarschuwing te tonen
function greet(){
    alert("Hallo Gebruiker!");
}
// let op dat de resultaten niet worden weergegeven 
// tenzij we de functie aanroepen
greet();
// maak enkele berekeningen en log ze naar de console
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// dit zal het resultaat in de JavaScript-console tonen die we hieronder hebben
// De console die we net hebben gebruikt, wordt veel gebruikt in programmeren
// inclusief in JavaScript.
// console.log-verklaringen kunnen heel nuttig zijn 
// om je te vertellen wat er in je programma gebeurt
// op deze manier, als er iets onverwachts gebeurt 
// kun je precies zien waar en wanneer het gebeurt
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("Eerste nummer is " + num1);
    console.log("Tweede nummer is " + num2);
    const result = num1 * num2;
    console.log("De resulterende vermenigvuldiging is " + result);
}

// laten we de functie hierboven aanroepen met twee nummers die we kiezen
// en onze JavaScript-console controleren op console logs
multiplyTwoNums(5, 7);

Het uitvoeren van de bovenstaande code zou resulteren in het volgende:

Zoals je kunt zien uit de output, hebben we de waarschuwing die wordt weergegeven vanuit de eerste functie die we uitvoeren. We hebben het resulterende nummer van 49 gelogd in de JavaScript-console. Direct daarna hebben we meer gedetailleerde output in de console over de derde functie. Het maken van console.log-verklaringen is vrij gebruikelijk in programmeren, afhankelijk van de programmeertaal die je gebruikt, kan de exacte naam veranderen, maar het idee blijft hetzelfde. Met console.log-verklaringen kunnen we een kijkje nemen in ons programma en onze code beter begrijpen. Dit is vooral een nuttig hulpmiddel wanneer er iets misgaat in je programma en je probeert uit te zoeken waar je precies een fout hebt gemaakt.

In de volgende tutorial zullen we een ander belangrijk onderwerp in JavaScript zien, genaamd objecten. Voordat we verder gaan met de volgende tutorial is het een goed idee om dit deel nog eens te bekijken zodat de concepten beter blijven hangen. Ik raad ook ten zeerste aan om de voorbeelden die we hebben behandeld te typen en ze zelf te ervaren. Wanneer je er klaar voor bent, gaan we verder met de objecten in JavaScript in de volgende tutorial.