24 KiB

Raw Blame History Unescape Escape

JavaScript Basis: Methoden en Functies

Sketchnote door Tomomi Imura

journey
    title Your JavaScript Functions Adventure
    section Foundation
      Function Syntax: 5: You
      Calling Functions: 4: You
      Parameters & Arguments: 5: You
    section Advanced Concepts
      Return Values: 4: You
      Default Parameters: 5: You
      Function Composition: 4: You
    section Modern JavaScript
      Arrow Functions: 5: You
      Anonymous Functions: 4: You
      Higher-Order Functions: 5: You

Quiz voor de les

Het herhaaldelijk schrijven van dezelfde code is een van de meest voorkomende frustraties in programmeren. Functies lossen dit probleem op door je in staat te stellen code te verpakken in herbruikbare blokken. Denk aan functies als de gestandaardiseerde onderdelen die Henry Ford's assemblagelijn revolutionair maakten – zodra je een betrouwbaar onderdeel hebt gemaakt, kun je het overal gebruiken zonder het opnieuw te bouwen.

Functies stellen je in staat om stukjes code te bundelen zodat je ze door je hele programma kunt hergebruiken. In plaats van dezelfde logica overal te kopiëren en plakken, kun je een functie één keer maken en deze oproepen wanneer nodig. Deze aanpak houdt je code georganiseerd en maakt updates veel eenvoudiger.

In deze les leer je hoe je je eigen functies kunt maken, informatie aan hen kunt doorgeven en nuttige resultaten kunt terugkrijgen. Je ontdekt het verschil tussen functies en methoden, leert moderne syntaxisbenaderingen en ziet hoe functies met andere functies kunnen samenwerken. We bouwen deze concepten stap voor stap op.

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

Je kunt deze les volgen op Microsoft Learn!

mindmap
  root((JavaScript Functions))
    Basic Concepts
      Declaration
        Traditional syntax
        Arrow function syntax
      Calling
        Using parentheses
        Parentheses required
    Parameters
      Input Values
        Multiple parameters
        Default values
      Arguments
        Values passed in
        Can be any type
    Return Values
      Output Data
        return statement
        Exit function
      Use Results
        Store in variables
        Chain functions
    Advanced Patterns
      Higher-Order
        Functions as parameters
        Callbacks
      Anonymous
        No name needed
        Inline definition

Functies

Een functie is een zelfstandig blok code dat een specifieke taak uitvoert. Het bevat logica die je kunt uitvoeren wanneer dat nodig is.

In plaats van dezelfde code meerdere keren in je programma te schrijven, kun je deze in een functie verpakken en die functie oproepen wanneer je hem nodig hebt. Deze aanpak houdt je code overzichtelijk en maakt updates veel eenvoudiger. Stel je de onderhoudsuitdaging voor als je logica moest wijzigen die verspreid was over 20 verschillende locaties in je codebase.

Het is essentieel om je functies beschrijvende namen te geven. Een goed gekozen naam voor een functie communiceert duidelijk het doel ervan – als je cancelTimer() ziet, begrijp je meteen wat het doet, net zoals een duidelijk gelabelde knop je precies vertelt wat er gebeurt als je erop klikt.

Een functie maken en oproepen

Laten we eens kijken hoe je een functie maakt. De syntaxis volgt een consistent patroon:

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

Laten we dit opsplitsen:

Het sleutelwoord function vertelt JavaScript "Hé, ik maak een functie!"
nameOfFunction is waar je je functie een beschrijvende naam geeft
De haakjes () zijn waar je parameters kunt toevoegen (daar komen we zo op terug)
De accolades {} bevatten de daadwerkelijke code die wordt uitgevoerd wanneer je de functie oproept

Laten we een eenvoudige begroetingsfunctie maken om dit in actie te zien:

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

Deze functie print "Hello, world!" naar de console. Zodra je hem hebt gedefinieerd, kun je hem zo vaak gebruiken als nodig.

Om je functie uit te voeren (of "op te roepen"), schrijf je de naam gevolgd door haakjes. JavaScript staat je toe om je functie te definiëren vóór of nadat je hem oproept – de JavaScript-engine regelt de uitvoeringsvolgorde.

// calling our function
displayGreeting();

Wanneer je deze regel uitvoert, voert het alle code binnen je displayGreeting-functie uit en toont "Hello, world!" in de console van je browser. Je kunt deze functie herhaaldelijk oproepen.

🧠 Basisprincipes van Functies: Bouw je eerste functies

Laten we kijken hoe je je voelt over basisfuncties:

Kun je uitleggen waarom we accolades {} gebruiken in functiedefinities?
Wat gebeurt er als je displayGreeting schrijft zonder de haakjes?
Waarom zou je dezelfde functie meerdere keren willen oproepen?

flowchart TD
    A["✏️ Define Function"] --> B["📦 Package Code"]
    B --> C["🏷️ Give it a Name"]
    C --> D["📞 Call When Needed"]
    D --> E["🔄 Reuse Anywhere"]
    
    F["💡 Benefits"] --> F1["No code repetition"]
    F --> F2["Easy to maintain"]
    F --> F3["Clear organization"]
    F --> F4["Easier testing"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

Opmerking: Je hebt methoden gebruikt in deze lessen. console.log() is een methode – in wezen een functie die behoort tot het console-object. Het belangrijkste verschil is dat methoden aan objecten zijn gekoppeld, terwijl functies onafhankelijk staan. Veel ontwikkelaars gebruiken deze termen in informele gesprekken door elkaar.

Beste praktijken voor functies

Hier zijn een paar tips om je te helpen geweldige functies te schrijven:

Geef je functies duidelijke, beschrijvende namen – je toekomstige zelf zal je dankbaar zijn!
Gebruik camelCasing voor namen met meerdere woorden (zoals calculateTotal in plaats van calculate_total)
Houd elke functie gericht op het goed uitvoeren van één ding

Informatie doorgeven aan een functie

Onze displayGreeting-functie is beperkt – hij kan alleen "Hello, world!" weergeven voor iedereen. Parameters stellen ons in staat om functies flexibeler en nuttiger te maken.

Parameters werken als plaatsvervangers waar je verschillende waarden kunt invoegen elke keer dat je de functie gebruikt. Op deze manier kan dezelfde functie met verschillende informatie werken bij elke oproep.

Je vermeldt parameters binnen de haakjes wanneer je je functie definieert, waarbij je meerdere parameters scheidt met komma's:

function name(param, param2, param3) {

}

Elke parameter werkt als een plaatsvervanger – wanneer iemand je functie oproept, geven ze daadwerkelijke waarden die in deze plekken worden geplaatst.

Laten we onze begroetingsfunctie bijwerken om iemands naam te accepteren:

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

Let op hoe we backticks (`) en ${} gebruiken om de naam direct in ons bericht in te voegen – dit wordt een template literal genoemd, en het is een handige manier om strings te bouwen met variabelen erin verwerkt.

Nu, wanneer we onze functie oproepen, kunnen we elke naam doorgeven:

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

JavaScript neemt de string 'Christopher', wijst deze toe aan de parameter name, en creëert het gepersonaliseerde bericht "Hello, Christopher!"

flowchart LR
    A["🎯 Function Call"] --> B["📥 Parameters"]
    B --> C["⚙️ Function Body"]
    C --> D["📤 Result"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["Template literal\n\`Hello, \${name}!\`"] --> C
    D1["'Hello, Alice!'"] --> D
    
    E["🔄 Parameter Types"] --> E1["Strings"]
    E --> E2["Numbers"]
    E --> E3["Booleans"]
    E --> E4["Objects"]
    E --> E5["Functions"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

Standaardwaarden

Wat als we sommige parameters optioneel willen maken? Daar komen standaardwaarden goed van pas!

Stel dat we willen dat mensen het begroetingswoord kunnen aanpassen, maar als ze er geen opgeven, gebruiken we gewoon "Hello" als standaard. Je kunt standaardwaarden instellen door het gelijkheidsteken te gebruiken, net zoals bij het instellen van een variabele:

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

Hier is name nog steeds vereist, maar salutation heeft een reservewaarde van 'Hello' als niemand een andere begroeting opgeeft.

Nu kunnen we deze functie op twee verschillende manieren oproepen:

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

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

Bij de eerste oproep gebruikt JavaScript de standaard "Hello" omdat we geen begroeting hebben opgegeven. Bij de tweede oproep gebruikt het onze aangepaste "Hi" in plaats daarvan. Deze flexibiliteit maakt functies aanpasbaar aan verschillende situaties.

🎛️ Parameters Beheersingscontrole: Functies Flexibel Maken

Test je begrip van parameters:

Wat is het verschil tussen een parameter en een argument?
Waarom zijn standaardwaarden nuttig in echte programmeersituaties?
Kun je voorspellen wat er gebeurt als je meer argumenten doorgeeft dan parameters?

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: Same output always
    WithParams --> Dynamic: Changes with input
    WithDefaults --> Flexible: Optional customization
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        Most flexible approach
        Backwards compatible
    end note

Pro tip: Standaardparameters maken je functies gebruiksvriendelijker. Gebruikers kunnen snel aan de slag met verstandige standaardwaarden, maar toch aanpassen wanneer nodig!

Returnwaarden

Onze functies hebben tot nu toe alleen berichten naar de console geprint, maar wat als je wilt dat een functie iets berekent en je het resultaat teruggeeft?

Daar komen returnwaarden in beeld. In plaats van alleen iets weer te geven, kan een functie een waarde teruggeven die je kunt opslaan in een variabele of gebruiken in andere delen van je code.

Om een waarde terug te sturen, gebruik je het sleutelwoord return gevolgd door wat je wilt retourneren:

return myVariable;

Hier is iets belangrijks: wanneer een functie een return-statement bereikt, stopt het onmiddellijk met uitvoeren en stuurt die waarde terug naar degene die de functie heeft opgeroepen.

Laten we onze begroetingsfunctie aanpassen om het bericht terug te geven in plaats van het te printen:

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

Nu, in plaats van de begroeting te printen, maakt deze functie het bericht en geeft het aan ons terug.

Om de geretourneerde waarde te gebruiken, kunnen we deze opslaan in een variabele zoals elke andere waarde:

const greetingMessage = createGreetingMessage('Christopher');

Nu bevat greetingMessage "Hello, Christopher" en kunnen we het overal in onze code gebruiken – om het op een webpagina weer te geven, in een e-mail op te nemen, of door te geven aan een andere functie.

flowchart TD
    A["🔧 Function Processing"] --> B{"return statement?"}
    B -->|Yes| C["📤 Return Value"]
    B -->|No| D["📭 Return undefined"]
    
    C --> E["💾 Store in Variable"]
    C --> F["🔗 Use in Expression"]
    C --> G["📞 Pass to Function"]
    
    D --> H["⚠️ Usually not useful"]
    
    I["📋 Return Value Uses"] --> I1["Calculate results"]
    I --> I2["Validate input"]
    I --> I3["Transform data"]
    I --> I4["Create objects"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 Returnwaarden Controle: Resultaten Terugkrijgen

Evalueer je begrip van returnwaarden:

Wat gebeurt er met code na een return-statement in een functie?
Waarom is het vaak beter om waarden terug te geven dan alleen naar de console te printen?
Kan een functie verschillende soorten waarden retourneren (string, nummer, boolean)?

pie title "Common Return Value Types"
    "Strings" : 30
    "Numbers" : 25
    "Objects" : 20
    "Booleans" : 15
    "Arrays" : 10

Belangrijk inzicht: Functies die waarden retourneren zijn veelzijdiger omdat de oproeper beslist wat te doen met het resultaat. Dit maakt je code modulaire en herbruikbaar!

Functies als parameters voor functies

Functies kunnen worden doorgegeven als parameters aan andere functies. Hoewel dit concept aanvankelijk complex kan lijken, is het een krachtige functie die flexibele programmeerpatronen mogelijk maakt.

Dit patroon is super gebruikelijk wanneer je wilt zeggen "wanneer iets gebeurt, doe dan dit andere ding." Bijvoorbeeld, "wanneer de timer afloopt, voer deze code uit" of "wanneer de gebruiker op de knop klikt, roep deze functie op."

Laten we kijken naar setTimeout, een ingebouwde functie die een bepaalde tijd wacht en vervolgens wat code uitvoert. We moeten aangeven welke code moet worden uitgevoerd – perfect gebruik voor het doorgeven van een functie!

Probeer deze code – na 3 seconden zie je een bericht:

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

Let op hoe we displayDone (zonder haakjes) doorgeven aan setTimeout. We roepen de functie niet zelf op – we geven deze door aan setTimeout en zeggen "roep dit over 3 seconden op."

Anonieme functies

Soms heb je een functie nodig voor slechts één ding en wil je hem geen naam geven. Denk erover na – als je een functie maar één keer gebruikt, waarom zou je je code vervuilen met een extra naam?

JavaScript laat je anonieme functies maken – functies zonder namen die je kunt definiëren waar je ze nodig hebt.

Hier is hoe we ons timervoorbeeld kunnen herschrijven met een anonieme functie:

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

Dit bereikt hetzelfde resultaat, maar de functie wordt direct binnen de setTimeout-aanroep gedefinieerd, waardoor een aparte functiedefinitie overbodig wordt.

Fat arrow functies

Modern JavaScript heeft een nog kortere manier om functies te schrijven, genaamd arrow functions. Ze gebruiken => (wat eruitziet als een pijl – snap je?) en zijn super populair bij ontwikkelaars.

Arrow functions laten je het sleutelwoord function overslaan en meer beknopte code schrijven.

Hier is ons timervoorbeeld met een arrow function:

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

De () is waar parameters zouden gaan (leeg in dit geval), dan komt de pijl =>, en ten slotte de functiebody in accolades. Dit biedt dezelfde functionaliteit met een meer beknopte syntaxis.

flowchart LR
    A["📝 Function Styles"] --> B["Traditional"]
    A --> C["Arrow"]
    A --> D["Anonymous"]
    
    B --> B1["function name() {}"]
    B --> B2["Hoisted"]
    B --> B3["Named"]
    
    C --> C1["const name = () => {}"]
    C --> C2["Concise syntax"]
    C --> C3["Modern style"]
    
    D --> D1["function() {}"]
    D --> D2["No name"]
    D --> D3["One-time use"]
    
    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
    E --> E2["Arrow: Short callbacks"]
    E --> E3["Anonymous: Event handlers"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

Wanneer gebruik je welke strategie?

Wanneer moet je elke aanpak gebruiken? Een praktische richtlijn: als je de functie meerdere keren zult gebruiken, geef hem een naam en definieer hem apart. Als het voor één specifiek gebruik is, overweeg een anonieme functie. Zowel arrow functions als traditionele syntaxis zijn geldige keuzes, hoewel arrow functions veel voorkomen in moderne JavaScript-codebases.

🎨 Functiestijlen Beheersingscontrole: Kies de juiste syntaxis

Test je begrip van syntaxis:

Wanneer zou je arrow functions verkiezen boven traditionele functiesyntaxis?
Wat is het belangrijkste voordeel van anonieme functies?
Kun je een situatie bedenken waarin een benoemde functie beter is dan een anonieme?

quadrantChart
    title Function Choice Decision Matrix
    x-axis Simple --> Complex
    y-axis One-time use --> Reusable
    quadrant-1 Arrow Functions
    quadrant-2 Named Functions
    quadrant-3 Anonymous Functions
    quadrant-4 Traditional Functions
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

Moderne trend: Arrow functions worden de standaardkeuze voor veel ontwikkelaars vanwege hun beknopte syntaxis, maar traditionele functies hebben nog steeds hun plaats!

🚀 Uitdaging

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

GitHub Copilot Agent Uitdaging 🚀

Gebruik de Agent-modus om de volgende uitdaging te voltooien:

Beschrijving: Maak een hulpbibliotheek van wiskundige functies die verschillende functieconcepten demonstreert die in deze les zijn behandeld, inclusief parameters, standaardwaarden, returnwaarden en arrow functions.

Prompt: Maak een JavaScript-bestand genaamd mathUtils.js dat de volgende functies bevat:

Een functie add die twee parameters neemt en hun som retourneert
Een functie multiply met standaardwaarden voor parameters (de tweede parameter standaard op 1)
Een arrow function square die een getal neemt en het kwadraat retourneert
Een functie calculate die een andere functie accepteert als parameter en twee getallen, en vervolgens de functie toepast op die getallen
Demonstreer het oproepen van elke functie met geschikte testcases

Meer informatie over agent mode hier.

Quiz na de les

Review & Zelfstudie

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

Opdracht

Fun met Functies

🧰 Samenvatting van je JavaScript Functies Toolkit

graph TD
    A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"]
    A --> C["📥 Parameters"]
    A --> D["📤 Return Values"]
    A --> E["🎨 Modern Syntax"]
    
    B --> B1["function name() {}"]
    B --> B2["Descriptive naming"]
    B --> B3["Reusable code blocks"]
    
    C --> C1["Input data"]
    C --> C2["Default values"]
    C --> C3["Multiple parameters"]
    
    D --> D1["return statement"]
    D --> D2["Exit function"]
    D --> D3["Pass data back"]
    
    E --> E1["Arrow functions: () =>"]
    E --> E2["Anonymous functions"]
    E --> E3["Higher-order functions"]
    
    F["⚡ Key Benefits"] --> F1["Code reusability"]
    F --> F2["Better organization"]
    F --> F3["Easier testing"]
    F --> F4["Modular design"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 Je JavaScript Functies Beheersings Tijdlijn

⚡ Wat je kunt doen in de komende 5 minuten

Schrijf een eenvoudige functie die je favoriete nummer retourneert
Maak een functie met twee parameters die ze bij elkaar optelt
Probeer een traditionele functie om te zetten naar pijlfunctie-syntaxis
Oefen de uitdaging: leg het verschil uit tussen functies en methoden

🎯 Wat Je Deze Uur Kunt Bereiken

Maak de quiz na de les en bekijk eventuele verwarrende concepten
Bouw de wiskundige hulpprogrammabibliotheek uit de GitHub Copilot-uitdaging
Maak een functie die een andere functie als parameter gebruikt
Oefen het schrijven van functies met standaardparameters
Experimenteer met template literals in de returnwaarden van functies

📅 Jouw Week-Lange Functiebeheersing

Maak de opdracht "Plezier met Functies" met creativiteit af
Refactor wat herhalende code die je hebt geschreven naar herbruikbare functies
Bouw een kleine rekenmachine met alleen functies (geen globale variabelen)
Oefen pijlfuncties met array-methoden zoals map() en filter()
Maak een verzameling hulpfuncties voor veelvoorkomende taken
Bestudeer hogere-orde functies en concepten van functioneel programmeren

🌟 Jouw Maand-Lange Transformatie

Beheers geavanceerde functieconcepten zoals closures en scope
Bouw een project dat sterk gebruik maakt van functiecompositie
Draag bij aan open source door functiedocumentatie te verbeteren
Leer iemand anders over functies en verschillende syntaxisstijlen
Verken paradigmas van functioneel programmeren in JavaScript
Maak een persoonlijke bibliotheek van herbruikbare functies voor toekomstige projecten

🏆 Eindcontrole Functiekampioen

Vier je beheersing van functies:

Wat is de meest nuttige functie die je tot nu toe hebt gemaakt?
Hoe heeft het leren over functies je manier van denken over codeorganisatie veranderd?
Welke functiesyntaxis heeft jouw voorkeur en waarom?
Welk probleem uit de echte wereld zou je oplossen door een functie te schrijven?

journey
    title Your Function Confidence Evolution
    section Today
      Confused by Syntax: 3: You
      Understanding Basics: 4: You
      Writing Simple Functions: 5: You
    section This Week
      Using Parameters: 4: You
      Returning Values: 5: You
      Modern Syntax: 5: You
    section Next Month
      Function Composition: 5: You
      Advanced Patterns: 5: You
      Teaching Others: 5: You

🎉 Je hebt een van de krachtigste concepten in programmeren onder de knie! Functies zijn de bouwstenen van grotere programma's. Elke applicatie die je ooit zult bouwen, zal functies gebruiken om code te organiseren, hergebruiken en structureren. Je begrijpt nu hoe je logica kunt verpakken in herbruikbare componenten, waardoor je een efficiëntere en effectievere programmeur wordt. Welkom in de wereld van modulair programmeren! 🚀

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 kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

24 KiB Raw Blame History Unescape Escape