24 KiB

Raw Blame History Unescape Escape

JavaScript Grundlæggende: Metoder og Funktioner

Sketchnote af Tomomi Imura

journey
    title Din JavaScript Funktions Eventyr
    section Grundlag
      Funktionssyntaks: 5: You
      Kald af Funktioner: 4: You
      Parametre & Argumenter: 5: You
    section Avancerede Begreber
      Returnværdier: 4: You
      Standardparametre: 5: You
      Funktionskomposition: 4: You
    section Moderne JavaScript
      Pilfunktioner: 5: You
      Anonyme Funktioner: 4: You
      Højere-ordens Funktioner: 5: You

For-forelæsning Quiz

For-forelæsning quiz

At skrive den samme kode igen og igen er en af programmeringens mest almindelige frustrationer. Funktioner løser dette problem ved at lade dig pakke kode ind i genanvendelige blokke. Tænk på funktioner som de standardiserede dele, der gjorde Henry Fords samlebånd revolutionerende – når du først har skabt en pålidelig komponent, kan du bruge den, hvor det end er nødvendigt uden at bygge den fra bunden.

Funktioner giver dig mulighed for at samle kode stykker, så du kan genbruge dem gennem hele dit program. I stedet for at kopiere og indsætte den samme logik alle steder, kan du oprette en funktion en gang og kalde den, når det er nødvendigt. Denne tilgang holder din kode organiseret og gør opdateringer meget nemmere.

I denne lektion lærer du, hvordan du opretter dine egne funktioner, sender information til dem og får nyttige resultater retur. Du vil opdage forskellen mellem funktioner og metoder, lære moderne syntaksmetoder og se, hvordan funktioner kan arbejde sammen med andre funktioner. Vi bygger disse koncepter trin for trin.

🎥 Klik på billedet ovenfor for en video om metoder og funktioner.

Du kan tage denne lektion på Microsoft Learn!

mindmap
  root((JavaScript-funktioner))
    Grundlæggende Begreber
      Deklaration
        Traditionel syntaks
        Pilfunktion syntaks
      Kald
        Brug af parenteser
        Parenteser påkrævet
    Parametre
      Inputværdier
        Flere parametre
        Standardværdier
      Argumenter
        Værdier sendt ind
        Kan være enhver type
    Returværdier
      Outputdata
        return-sætning
        Afslut funktion
      Brug resultater
        Gem i variable
        Kæd funktioner
    Avancerede Mønstre
      Højere Ordens
        Funktioner som parametre
        Callbacks
      Anonyme
        Intet navn nødvendigt
        Inline-definition

Funktioner

En funktion er en selvstændig kodeblok, der udfører en specifik opgave. Den indkapsler logik, som du kan køre, når det er nødvendigt.

I stedet for at skrive den samme kode flere gange i dit program, kan du pakke den ind i en funktion og kalde denne funktion, når du har brug for det. Denne tilgang holder din kode ren og gør opdateringer meget nemmere. Overvej hvor svært det ville være at vedligeholde, hvis du skulle ændre logik spredt over 20 forskellige steder i din kodebase.

Det er vigtigt at navngive dine funktioner beskrivende. En godt navngivet funktion kommunikerer sit formål klart – når du ser cancelTimer(), forstår du straks, hvad den gør, ligesom en klart mærket knap fortæller dig præcis, hvad der sker, når du klikker på den.

Oprettelse og kald af en funktion

Lad os se på, hvordan man opretter en funktion. Syntaksen følger et konsekvent mønster:

function nameOfFunction() { // funktionsdefinition
 // funktionsdefinition/krop
}

Lad os bryde det ned:

function nøgleordet fortæller JavaScript "Hey, jeg laver en funktion!"
nameOfFunction er, hvor du giver din funktion et beskrivende navn
Parentesserne () er, hvor du kan tilføje parametre (det vender vi tilbage til snart)
Krøllede parenteser {} indeholder den faktiske kode, der kører, når du kalder funktionen

Lad os lave en simpel hilsensfunktion for at se det i praksis:

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

Denne funktion udskriver "Hello, world!" til konsollen. Når du har defineret den, kan du bruge den så mange gange, som du har brug for.

For at udføre (eller "kalde") din funktion, skriv dens navn efterfulgt af parenteser. JavaScript tillader dig at definere din funktion før eller efter du kalder den – JavaScript motoren håndterer udførelsesrækkefølgen.

// kalder vores funktion
displayGreeting();

Når du kører denne linje, eksekveres al koden inde i din displayGreeting funktion, og "Hello, world!" vises i browserens konsol. Du kan kalde denne funktion gentagne gange.

🧠 Grundlæggende Funktionstjek: Byg Dine Første Funktioner

Lad os se, hvordan du føler dig med grundlæggende funktioner:

Kan du forklare, hvorfor vi bruger krøllede parenteser {} i funktionsdefinitioner?
Hvad sker der, hvis du skriver displayGreeting uden parenteserne?
Hvorfor kan det være nyttigt at kalde den samme funktion flere gange?

flowchart TD
    A["✏️ Definer Funktion"] --> B["📦 Pakke kode"]
    B --> C["🏷️ Giv det et Navn"]
    C --> D["📞 Ring når nødvendigt"]
    D --> E["🔄 Genbrug overalt"]
    
    F["💡 Fordele"] --> F1["Ingen kode gentagelse"]
    F --> F2["Nemt at vedligeholde"]
    F --> F3["Klar organisering"]
    F --> F4["Nemmere testning"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

Bemærk: Du har brugt metoder gennem disse lektioner. console.log() er en metode – i bund og grund en funktion, som tilhører console objektet. Den vigtigste forskel er, at metoder er bundet til objekter, mens funktioner står selvstændigt. Mange udviklere bruger disse termer i daglig tale ombytteligt.

Bedste praksis for funktioner

Her er et par tips til at hjælpe dig med at skrive gode funktioner:

Giv dine funktioner klare, beskrivende navne – din fremtidige version vil takke dig!
Brug camelCase til flersprogede navne (f.eks. calculateTotal i stedet for calculate_total)
Hold hver funktion fokuseret på at gøre én ting godt

At sende information til en funktion

Vores displayGreeting funktion er begrænset – den kan kun vise "Hello, world!" til alle. Parametre tillader os at gøre funktioner mere fleksible og nyttige.

Parametre fungerer som pladsholdere, hvor du kan indsætte forskellige værdier hver gang, du bruger funktionen. På den måde kan den samme funktion arbejde med forskellig information ved hvert kald.

Du opremser parametre inde i parenteserne, når du definerer din funktion, adskilt med kommaer, hvis der er flere:

function name(param, param2, param3) {

}

Hver parameter fungerer som en pladsholder – når nogen kalder din funktion, giver de egentlige værdier, der sættes ind i disse pladsholdere.

Lad os opdatere vores hilsensfunktion, så den tager imod et navn:

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

Bemærk hvordan vi bruger backticks (`) og ${} til at indsætte navnet direkte i vores besked – dette kaldes en template literal, og det er en rigtig praktisk måde at bygge strenge med variable blandet ind.

Nu kan vi, når vi kalder vores funktion, sende et hvilket som helst navn:

displayGreeting('Christopher');
// viser "Hej, Christopher!" når det køres

JavaScript tager strengen 'Christopher', tildeler den til name parameteren og skaber den personlige besked "Hello, Christopher!"

flowchart LR
    A["🎯 Funktionskald"] --> B["📥 Parametre"]
    B --> C["⚙️ Funktionsindhold"]
    C --> D["📤 Resultat"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["Skabelonliteral\n\`Hej, \${name}!\`"] --> C
    D1["'Hej, Alice!'"] --> D
    
    E["🔄 Parametertyper"] --> E1["Strenge"]
    E --> E2["Tal"]
    E --> E3["Booleske"]
    E --> E4["Objekter"]
    E --> E5["Funktioner"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

Standardværdier

Hvad hvis vi vil gøre nogle parametre valgfrie? Det er her standardværdier kommer ind i billedet!

Lad os sige, at vi vil lade folk tilpasse hilsens ord, men hvis de ikke angiver noget, bruger vi bare "Hello" som en standard. Du kan opsætte standardværdier ved at bruge lighedstegn, ligesom når du sætter en variabel:

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

Her er name stadig påkrævet, men salutation har en backup værdi på 'Hello', hvis ingen giver en anden hilsen.

Nu kan vi kalde denne funktion på to forskellige måder:

displayGreeting('Christopher');
// viser "Hej, Christopher"

displayGreeting('Christopher', 'Hi');
// viser "Hej, Christopher"

Ved det første kald bruger JavaScript standarden "Hello", da vi ikke har angivet en hilsen. Ved det andet kald bruger den vores brugerdefinerede "Hi" i stedet. Denne fleksibilitet gør funktioner tilpasningsdygtige til forskellige scenarier.

🎛️ Parametre Mester Check: Gør Funktioner Fleksible

Test din forståelse af parametre:

Hvad er forskellen mellem en parameter og et argument?
Hvorfor er standardværdier nyttige i programmering i den virkelige verden?
Kan du forudsige, hvad der sker, hvis du sender flere argumenter end parametre?

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: Samme output altid
    WithParams --> Dynamic: Ændrer sig med input
    WithDefaults --> Flexible: Valgfri tilpasning
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        Mest fleksible tilgang
        Bagudkompatibel
    end note

Pro tip: Standardparametre gør dine funktioner mere brugervenlige. Brugere kan hurtigt komme i gang med fornuftige standardindstillinger, men kan stadig tilpasse, når det er nødvendigt!

Returnerede værdier

Vores funktioner hidtil har bare udskrevet beskeder til konsollen, men hvad hvis du ønsker, at en funktion skal beregne noget og give dig resultatet tilbage?

Det er her returnerede værdier kommer ind i billedet. I stedet for bare at vise noget, kan en funktion give dig en værdi tilbage, som du kan gemme i en variabel eller bruge andre steder i din kode.

For at sende en værdi tilbage bruger du nøgleordet return efterfulgt af det, du ønsker at returnere:

return myVariable;

Her er noget vigtigt: Når en funktion rammer en return erklæring, stopper den øjeblikkeligt med at køre og sender den værdi tilbage til den, som kaldte den.

Lad os ændre vores hilsensfunktion, så den returnerer beskeden i stedet for at udskrive den:

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

Nu skaber denne funktion beskeden og sender den tilbage til os i stedet for at udskrive den.

For at bruge den returnerede værdi kan vi gemme den i en variabel ligesom enhver anden værdi:

const greetingMessage = createGreetingMessage('Christopher');

Nu indeholder greetingMessage "Hello, Christopher" og vi kan bruge den hvor som helst i vores kode – til at vise den på en webside, inkludere den i en email eller sende den til en anden funktion.

flowchart TD
    A["🔧 Funktionsbehandling"] --> B{"return sætning?"}
    B -->|Ja| C["📤 Returner værdi"]
    B -->|Nej| D["📭 Returner undefined"]
    
    C --> E["💾 Gem i variabel"]
    C --> F["🔗 Brug i udtryk"]
    C --> G["📞 Send til funktion"]
    
    D --> H["⚠️ Normalt ikke nyttigt"]
    
    I["📋 Anvendelser af return værdi"] --> I1["Beregn resultater"]
    I --> I2["Valider input"]
    I --> I3["Transformer data"]
    I --> I4["Opret objekter"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 Returnerede Værdier Check: Få Resultater Tilbage

Evaluer din forståelse af returnerede værdier:

Hvad sker der med kode efter en return erklæring i en funktion?
Hvorfor er det ofte bedre at returnere værdier end bare at udskrive til konsollen?
Kan en funktion returnere forskellige typer værdier (streng, tal, boolsk)?

pie title "Almindelige returværdityper"
    "Strenge" : 30
    "Tal" : 25
    "Objekter" : 20
    "Booleske værdier" : 15
    "Arrays" : 10

Vigtig indsigt: Funktioner, der returnerer værdier, er mere alsidige, fordi den, der kalder funktionen, beslutter, hvad der skal gøres med resultatet. Dette gør din kode mere modulær og genanvendelig!

Funktioner som parametre for funktioner

Funktioner kan sendes som parametre til andre funktioner. Selvom dette koncept kan virke komplekst til at starte med, er det en kraftfuld funktion, der muliggør fleksible programmeringsmønstre.

Dette mønster er super almindeligt, når du vil sige "når noget sker, gør dette andet." For eksempel "når timeren slutter, kør denne kode" eller "når brugeren klikker på knappen, kald denne funktion."

Lad os se på setTimeout, som er en indbygget funktion, der venter et bestemt tidsrum og så kører noget kode. Vi skal fortælle den, hvilken kode den skal køre – perfekt brug af at sende en funktion!

Prøv denne kode – efter 3 sekunder ser du en besked:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer værdien er i millisekunder
setTimeout(displayDone, 3000);

Bemærk hvordan vi sender displayDone (uden parenteser) til setTimeout. Vi kalder ikke funktionen selv – vi overgiver den til setTimeout og siger "kald denne om 3 sekunder."

Anonyme funktioner

Nogle gange har du brug for en funktion til bare én ting og vil ikke give den et navn. Tænk over det – hvis du kun bruger en funktion én gang, hvorfor så fylde din kode med et ekstra navn?

JavaScript lader dig oprette anonyme funktioner – funktioner uden navne, som du kan definere lige dér, hvor du har brug for dem.

Sådan kan vi omskrive vores timer-eksempel med en anonym funktion:

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

Dette opnår det samme resultat, men funktionen er defineret direkte inden i setTimeout kaldet, hvilket eliminerer behovet for en separat funktionsdeklaration.

Fat arrow funktioner

Moderne JavaScript har en endnu kortere måde at skrive funktioner på kaldet arrow functions. De bruger => (som ligner en pil – forstår du?) og er super populære blandt udviklere.

Arrow-funktioner lader dig springe function nøgleordet over og skrive mere koncis kode.

Her er vores timer-eksempel med en arrow-funktion:

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

() er hvor parametrene går (tomt i dette tilfælde), derefter kommer pilen =>, og til sidst funktionskroppen i krøllede parenteser. Dette giver den samme funktionalitet med en mere koncis syntaks.

flowchart LR
    A["📝 Funktionsstile"] --> B["Traditionel"]
    A --> C["Pil"]
    A --> D["Anonym"]
    
    B --> B1["function navn() {}"]
    B --> B2["Løftet"]
    B --> B3["Navngivet"]
    
    C --> C1["const navn = () => {}"]
    C --> C2["Konkis syntax"]
    C --> C3["Moderne stil"]
    
    D --> D1["function() {}"]
    D --> D2["Intet navn"]
    D --> D3["Engangsbrug"]
    
    E["⏰ Hvornår man skal bruge"] --> E1["Traditionel: Genanvendelige funktioner"]
    E --> E2["Pil: Korte tilbagekald"]
    E --> E3["Anonym: Event-håndterere"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

Hvornår skal man bruge hvilken strategi

Hvornår skal du bruge hvilken tilgang? En praktisk tommelfingerregel: Hvis du vil bruge funktionen flere gange, giv den et navn og definer den separat. Hvis det er til ét specifikt formål, kan du overveje en anonym funktion. Både arrow-funktioner og traditionel syntaks er gyldige valg, selvom arrow-funktioner er udbredte i moderne JavaScript-kodebaser.

🎨 Funktion Styles Mester Check: Vælg den Rigtige Syntaks

Test din syntaksforståelse:

Hvornår foretrækker du måske arrow functions fremfor traditionel funktionssyntaks?
Hvad er hovedfordelen ved anonyme funktioner?
Kan du tænke på en situation, hvor en navngivet funktion er bedre end en anonym?

quadrantChart
    title Beslutningsmatrix for Funktionsvalg
    x-axis Simpel --> Kompleks
    y-axis Engangsbrug --> Genanvendelig
    quadrant-1 Pilefunktioner
    quadrant-2 Navngivne Funktioner
    quadrant-3 Anonyme Funktioner
    quadrant-4 Traditionelle Funktioner
    
    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 bliver standardvalget for mange udviklere på grund af deres koncise syntaks, men traditionelle funktioner har stadig deres plads!

🚀 Udfordring

Kan du formulere forskellen på funktioner og metoder i én sætning? Giv det et forsøg!

GitHub Copilot Agent Udfordring 🚀

Brug Agent-tilstand til at løse følgende udfordring:

Beskrivelse: Opret et hjælpemiddel bibliotek af matematiske funktioner, der demonstrerer forskellige funktionskoncepter dækket i denne lektion, inklusive parametre, standardværdier, returnerede værdier og arrow funktioner.

Prompt: Opret en JavaScript-fil kaldet mathUtils.js, som indeholder følgende funktioner:

En funktion add der tager to parametre og returnerer summen
En funktion multiply med standard parameter værdier (anden parameter standard til 1)
En arrow funktion square, der tager et tal og returnerer dets kvadrat
En funktion calculate som accepterer en anden funktion som parameter og to tal, og derefter anvender funktionen på tallene
Demonstrer kald af hver funktion med passende testcases

Læs mere om agent mode her.

Efter-forelæsning Quiz

Efter-forelæsning quiz

Gennemgang & Selvstudium

Det er værd at læse lidt mere om arrow-funktioner, da de i stigende grad bruges i kodebaser. Øv dig i at skrive en funktion og derefter omskrive den med denne syntaks.

Opgave

Sjov med Funktioner

🧰 Dit JavaScript Funktionsværktøjssæt Resumé

graph TD
    A["🎯 JavaScript Funktioner"] --> B["📋 Funktionsdeklaration"]
    A --> C["📥 Parametre"]
    A --> D["📤 Returværdier"]
    A --> E["🎨 Moderne Syntaks"]
    
    B --> B1["function navn() {}"]
    B --> B2["Beskrivende navngivning"]
    B --> B3["Genanvendelige kodeblokke"]
    
    C --> C1["Input data"]
    C --> C2["Standardværdier"]
    C --> C3["Flere parametre"]
    
    D --> D1["return sætning"]
    D --> D2["Afslut funktion"]
    D --> D3["Send data tilbage"]
    
    E --> E1["Pilestrengsfunktioner: () =>"]
    E --> E2["Anonyme funktioner"]
    E --> E3["Højereordensfunktioner"]
    
    F["⚡ Nøglefordele"] --> F1["Kodegenbrug"]
    F --> F2["Bedre organisering"]
    F --> F3["Nemmere testning"]
    F --> F4["Modulært 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

🚀 Din JavaScript Funktionsmester Tidslinje

⚡ Hvad du kan gøre i de næste 5 minutter

Skriv en simpel funktion, der returnerer dit yndlingstal
Opret en funktion med to parametre, der lægger dem sammen
Prøv at konvertere en traditionel funktion til arrow function-syntaks
Øv udfordringen: forklar forskellen mellem funktioner og metoder

🎯 Hvad du kan nå denne time

Færdiggør quizzen efter lektionen og gennemgå eventuelle forvirrende begreber
Byg matematikværktøjsbiblioteket fra GitHub Copilot-udfordringen
Opret en funktion, der bruger en anden funktion som parameter
Øv dig i at skrive funktioner med standardparametre
Eksperimenter med template literals i funktionsreturværdier

📅 Din uge-lange funktionsmestring

Færdiggør opgaven "Sjov med funktioner" med kreativitet
Refaktorer noget gentaget kode, du har skrevet, til genanvendelige funktioner
Byg en lille lommeregner kun ved hjælp af funktioner (ingen globale variabler)
Øv arrow functions med array-metoder som map() og filter()
Opret en samling af hjælpefunktioner til almindelige opgaver
Studer højereordensfunktioner og funktionelle programmeringskoncepter

🌟 Din månedslange transformation

Mestre avancerede funktionskoncepter som closures og scope
Byg et projekt, der i høj grad bruger funktionskomposition
Bidrag til open source ved at forbedre funktionsdokumentation
Lær en anden om funktioner og forskellige syntaksstile
Udforsk funktionelle programmeringsparadigmer i JavaScript
Opret et personligt bibliotek af genanvendelige funktioner til fremtidige projekter

🏆 Endelig funktionsmester tjek-ind

Fejr din funktionsmestring:

Hvad er den mest nyttige funktion, du har skabt indtil nu?
Hvordan har det at lære om funktioner ændret din måde at tænke på kodeorganisation?
Hvilken funktionssyntaks foretrækker du og hvorfor?
Hvilket virkeligt problem ville du løse ved at skrive en funktion?

journey
    title Din Funktion Tillidsudvikling
    section I dag
      Forvirret over Syntax: 3: You
      Forståelse af Grundlæggende: 4: You
      Skriver Enkle Funktioner: 5: You
    section Denne Uge
      Brug af Parametre: 4: You
      Returnerer Værdier: 5: You
      Moderne Syntax: 5: You
    section Næste Måned
      Funktionssammensætning: 5: You
      Avancerede Mønstre: 5: You
      Underviser Andre: 5: You

🎉 Du har mestret et af programmeringens mest magtfulde koncepter! Funktioner er byggestenene til større programmer. Enhver applikation, du nogensinde bygger, vil bruge funktioner til at organisere, genbruge og strukturere kode. Du forstår nu, hvordan du pakker logik ind i genanvendelige komponenter, hvilket gør dig til en mere effektiv og dygtig programmør. Velkommen til verden af modulær programmering! 🚀

Ansvarsfraskrivelse: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For vigtig information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

24 KiB Raw Blame History Unescape Escape