Du har skrevet det samme document.writeline-kallet fem ganger i koden din, og hver gang du skal endre noe, må du oppdatere alle fem stedene. Koden vokser, blir uoversiktlig og vanskelig å vedlikeholde. Funksjoner i JavaScript løser akkurat dette problemet. De lar deg samle kode du bruker ofte i en navngitt blokk, og kalle den opp når du trenger den.
Hva er en funksjon i JavaScript?
En funksjon er en navngitt kodeblokk som utfører en bestemt oppgave. Du definerer funksjonen en gang, og deretter kan du kalle den opp hvor som helst i koden. Tenk på det som en oppskrift: du skriver den ned en gang, og hver gang du trenger resultatet, følger du oppskriften i stedet for å gjøre alt fra bunnen av.
En enkel funksjon kan se slik ut: du skriver nøkkelordet function, gir den et navn, og setter koden du vil kjøre mellom krøllparentesene. Når du vil bruke funksjonen, skriver du navnet etterfulgt av parenteser. Resultatet er renere kode som er enklere å lese og vedlikeholde.
Funksjonsparametere gjør funksjoner fleksible
En funksjon som alltid gjør nøyaktig det samme er nyttig, men begrenset. Med funksjonsparametere kan du sende verdier inn i funksjonen slik at den oppfører seg forskjellig hver gang du kaller den. Parameteren er i praksis en variabel som får sin verdi når funksjonen kalles opp.
Si at du har en funksjon som heter "print". I stedet for å ha en fast tekst inne i funksjonen, setter du en parameter kalt "tekst" i parentesen bak funksjonsnavnet. Nå kan du skrive print("hallo") og få "hallo" ut på skjermen, eller print("god morgen") og få noe helt annet. Selve funksjonen er den samme, men resultatet endrer seg basert på hva du sender inn.
Du kan også bruke flere parametere i samme funksjon. Et godt eksempel er en funksjon som sjekker om det er helg. Den kan ta inn to parametere: "dagIUken" og "time". Da bestemmer du verdiene når du kaller funksjonen, og den håndterer resten. Rekkefølgen på parameterne er viktig. Det første argumentet du sender inn tilsvarer den første parameteren, det andre argumentet tilsvarer den andre, og så videre.
Slik bruker du funksjoner i JavaScript til å forenkle kode
En av de største fordelene med funksjoner i JavaScript er at de gjør koden kortere og mer lesbar. I stedet for å skrive document.writeline hver gang du vil ha noe ut på skjermen, kan du lage din egen print-funksjon som håndterer det for deg. Plutselig er koden din mer kompakt, og du ser med en gang hva hvert steg gjør.
Samme prinsipp gjelder for mer sammensatt logikk. Har du et program som sjekker ukedag og klokkeslett for å avgjøre om det er helg, kan du pakke hele den logikken inn i en funksjon kalt "erDetHelg". Resten av koden trenger bare kalle den funksjonen. Det gjør programmet enklere å forstå for andre som leser koden din, og for deg selv om tre måneder.
Return: la funksjonen gi tilbake en verdi
Noen ganger vil du ikke at funksjonen skal skrive noe ut på skjermen. I stedet vil du at den skal gi deg tilbake et resultat du kan bruke videre. Det gjør du med return-kommandoen.
Et typisk eksempel er en funksjon som beregner noe. Si at du lager en funksjon kalt "nestenPi" som regner ut 22 delt på 7. Hvis funksjonen bare skriver ut svaret med document.writeline, kan du ikke bruke det tallet i andre regnestykker. Prøver du å gange 2 med funksjonen, får du resultatet NaN (not a number) fordi funksjonen ikke returnerer en tallverdi.
Med return endrer du dette. I stedet for å skrive ut verdien inni funksjonen, returnerer du den. Nå kan du bruke nestenPi() i et regnestykke, lagre resultatet i en variabel, eller sende det videre til en annen funksjon. Funksjonen blir et byggeklosser du kan kombinere fritt.
Funksjoner kan kalle andre funksjoner
Funksjoner i JavaScript er ikke isolerte. Du kan bruke en funksjon inne i en annen funksjon. Print-funksjonen du laget kan brukes inne i en annen funksjon som beregner omkretsen av en sirkel. Denne muligheten til å bygge lag på lag er det som gjør funksjoner så kraftige.
Tenk på det som legoklosser. Hver funksjon gjør en avgrenset ting. Når du setter dem sammen, kan du bygge noe komplekst uten at hver enkelt del er vanskelig å forstå. Holder du funksjonene små og fokuserte, blir koden din mye enklere å feilsøke og utvide.
Return avslutter funksjonen
En detalj som er lett å overse: return stopper kjøringen av funksjonen. All kode som står etter return-setningen i funksjonen blir aldri kjørt. Hvis du skriver en print-kommando etter return, vil den aldri vises på skjermen.
Dette er nyttig å vite når du feilsøker. Hvis noe i funksjonen din ikke virker, sjekk om det står etter en return-setning. Vil du at noe skal skje i tillegg til at en verdi returneres, må den koden stå over return.
Når bør du lage en funksjon?
En god tommelfingerregel: hvis du skriver den samme koden to ganger, bør det bli en funksjon. Men funksjoner handler om mer enn å unngå gjentakelse. De handler om å gi koden din struktur. En funksjon med et godt navn forteller leseren hva koden gjør uten at de trenger å lese detaljene.
Funksjoner er også grunnlaget for å forstå scope, altså reglene for hvor variabler er tilgjengelige i koden. Og når du mestrer egne funksjoner, blir det lettere å forstå innebygde funksjoner i JavaScript som Math.round, toUpperCase og andre metoder du møter overalt. MDN har en fullstendig oversikt over funksjoner i JavaScript hvis du vil dykke dypere.
Denne artikkelen bygger på innhold fra kurset JavaScript for nybegynnere på Utdannet.no. I kurset tar instruktør Lars Vidar Nordli deg gjennom funksjonsparametere, return-verdier, scope og mye mer med praktiske eksempler du koder selv.
