11 KiB

Raw Blame History

JavaScript Basis: Methoden en Functies

Sketchnote door Tomomi Imura

Pre-Les Quiz

Wanneer we nadenken over het schrijven van code, willen we altijd zorgen dat onze code leesbaar is. Hoewel dit misschien tegenstrijdig klinkt, wordt code veel vaker gelezen dan geschreven. Een belangrijk hulpmiddel in de gereedschapskist van een ontwikkelaar om onderhoudbare code te garanderen, is de functie.

🎥 Klik op de afbeelding hierboven voor een video over methoden en functies.

Je kunt deze les volgen op Microsoft Learn!

Functies

In essentie is een functie een blok code dat we op verzoek kunnen uitvoeren. Dit is ideaal voor situaties waarin we dezelfde taak meerdere keren moeten uitvoeren; in plaats van de logica op meerdere locaties te dupliceren (wat het moeilijk zou maken om bij te werken wanneer dat nodig is), kunnen we het centraliseren op één plek en het oproepen wanneer we de operatie willen uitvoeren - je kunt zelfs functies oproepen vanuit andere functies!

Net zo belangrijk is het vermogen om een functie een naam te geven. Hoewel dit misschien triviaal lijkt, biedt de naam een snelle manier om een sectie code te documenteren. Je kunt dit zien als een label op een knop. Als ik op een knop klik met de tekst "Timer annuleren", weet ik dat het de klok stopt.

Een functie maken en oproepen

De syntaxis voor een functie ziet er als volgt uit:

function nameOfFunction() { // function definition
 // function definition/body
}

Als ik een functie wilde maken om een begroeting weer te geven, zou dat er zo uitzien:

function displayGreeting() {
  console.log('Hello, world!');
}

Wanneer we onze functie willen oproepen (of aanroepen), gebruiken we de naam van de functie gevolgd door (). Het is belangrijk op te merken dat onze functie kan worden gedefinieerd vóór of nadat we besluiten deze op te roepen; de JavaScript-compiler zal deze voor je vinden.

// calling our function
displayGreeting();

NOTE: Er is een speciaal type functie dat bekend staat als een methode, die je al hebt gebruikt! In feite zagen we dit in onze demo hierboven toen we console.log gebruikten. Wat een methode anders maakt dan een functie, is dat een methode aan een object is gekoppeld (console in ons voorbeeld), terwijl een functie vrij zwevend is. Je zult veel ontwikkelaars deze termen door elkaar horen gebruiken.

Beste praktijken voor functies

Er zijn een aantal beste praktijken om in gedachten te houden bij het maken van functies:

Gebruik altijd beschrijvende namen zodat je weet wat de functie zal doen
Gebruik camelCasing om woorden te combineren
Houd je functies gericht op een specifieke taak

Informatie doorgeven aan een functie

Om een functie meer herbruikbaar te maken, wil je vaak informatie doorgeven. Als we ons displayGreeting-voorbeeld hierboven bekijken, zal het alleen Hello, world! weergeven. Niet de meest nuttige functie die je kunt maken. Als we het iets flexibeler willen maken, zoals iemand de naam van de persoon laten specificeren die begroet moet worden, kunnen we een parameter toevoegen. Een parameter (ook soms een argument genoemd) is aanvullende informatie die naar een functie wordt gestuurd.

Parameters worden vermeld in het definitiegedeelte tussen haakjes en worden door komma's gescheiden, zoals:

function name(param, param2, param3) {

}

We kunnen onze displayGreeting bijwerken om een naam te accepteren en die weer te geven.

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Wanneer we onze functie willen oproepen en de parameter willen doorgeven, specificeren we deze tussen de haakjes.

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

Standaardwaarden

We kunnen onze functie nog flexibeler maken door meer parameters toe te voegen. Maar wat als we niet willen dat elke waarde verplicht wordt opgegeven? Blijvend bij ons begroetingsvoorbeeld, zouden we de naam verplicht kunnen laten (we moeten weten wie we begroeten), maar willen we de begroeting zelf naar wens laten aanpassen. Als iemand het niet wil aanpassen, bieden we een standaardwaarde aan. Om een standaardwaarde aan een parameter toe te voegen, stellen we deze in op dezelfde manier als we een waarde voor een variabele instellen - parameterName = 'defaultValue'. Een volledig voorbeeld:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Wanneer we de functie oproepen, kunnen we dan beslissen of we een waarde willen instellen voor salutation.

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Returnwaarden

Tot nu toe zal de functie die we hebben gebouwd altijd output geven naar de console. Soms kan dit precies zijn wat we zoeken, vooral wanneer we functies maken die andere services zullen aanroepen. Maar wat als ik een hulpfunctie wil maken om een berekening uit te voeren en de waarde terug te geven zodat ik deze elders kan gebruiken?

We kunnen dit doen door een returnwaarde te gebruiken. Een returnwaarde wordt door de functie teruggegeven en kan in een variabele worden opgeslagen, net zoals we een letterlijke waarde zoals een string of getal zouden opslaan.

Als een functie iets teruggeeft, wordt het sleutelwoord return gebruikt. Het sleutelwoord return verwacht een waarde of referentie van wat wordt teruggegeven, zoals:

return myVariable;

We zouden een functie kunnen maken om een begroetingsbericht te maken en de waarde terug te geven aan de aanroeper.

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Bij het oproepen van deze functie slaan we de waarde op in een variabele. Dit is vrijwel hetzelfde als wanneer we een variabele instellen op een statische waarde (zoals const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Functies als parameters voor functies

Naarmate je verder komt in je programmeercarrière, zul je functies tegenkomen die functies als parameters accepteren. Deze handige truc wordt vaak gebruikt wanneer we niet weten wanneer iets gaat gebeuren of voltooid zal zijn, maar we weten dat we een operatie moeten uitvoeren als reactie.

Als voorbeeld, overweeg setTimeout, die een timer start en code uitvoert wanneer deze voltooid is. We moeten aangeven welke code we willen uitvoeren. Klinkt als een perfecte taak voor een functie!

Als je de onderstaande code uitvoert, zie je na 3 seconden het bericht 3 seconden zijn verstreken.

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Anonieme functies

Laten we nog eens kijken naar wat we hebben gebouwd. We maken een functie met een naam die slechts één keer zal worden gebruikt. Naarmate onze applicatie complexer wordt, kunnen we ons voorstellen dat we veel functies maken die slechts één keer worden aangeroepen. Dit is niet ideaal. Het blijkt dat we niet altijd een naam hoeven te geven!

Wanneer we een functie als parameter doorgeven, kunnen we het maken ervan vooraf overslaan en in plaats daarvan een functie bouwen als onderdeel van de parameter. We gebruiken hetzelfde sleutelwoord function, maar bouwen het als een parameter.

Laten we de bovenstaande code herschrijven om een anonieme functie te gebruiken:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Als je onze nieuwe code uitvoert, zul je merken dat we dezelfde resultaten krijgen. We hebben een functie gemaakt, maar hoefden er geen naam aan te geven!

Fat arrow functies

Een veelgebruikte shortcut in veel programmeertalen (inclusief JavaScript) is de mogelijkheid om gebruik te maken van wat een arrow of fat arrow functie wordt genoemd. Het gebruikt een speciale indicator =>, die eruitziet als een pijl - vandaar de naam! Door => te gebruiken, kunnen we het sleutelwoord function overslaan.

Laten we onze code nog een keer herschrijven om een fat arrow functie te gebruiken:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Wanneer welke strategie te gebruiken

Je hebt nu gezien dat we drie manieren hebben om een functie als parameter door te geven en vraagt je misschien af wanneer je welke moet gebruiken. Als je weet dat je de functie meer dan eens zult gebruiken, maak deze dan zoals normaal. Als je deze slechts op één locatie zult gebruiken, is het over het algemeen het beste om een anonieme functie te gebruiken. Of je een fat arrow functie of de meer traditionele function-syntaxis gebruikt, is aan jou, maar je zult merken dat de meeste moderne ontwikkelaars de voorkeur geven aan =>.

🚀 Uitdaging

Kun je in één zin het verschil tussen functies en methoden uitleggen? Probeer het eens!

Post-Les Quiz

Post-les quiz

Review & Zelfstudie

Het is de moeite waard om wat meer te lezen over arrow functies, aangezien ze steeds vaker worden gebruikt in codebases. Oefen met het schrijven van een functie en herschrijf deze vervolgens met deze syntaxis.

Opdracht

Leuke dingen met Functies

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

11 KiB Raw Blame History