10 KiB

Raw Permalink Blame History Unescape Escape

Grunnleggende JavaScript: Metoder og Funksjoner

Sketchnote av Tomomi Imura

Quiz før forelesning

Når vi skriver kode, ønsker vi alltid å sikre at koden vår er lesbar. Selv om dette kan virke motstridende, blir kode lest mange flere ganger enn den blir skrevet. Et av de viktigste verktøyene i en utviklers verktøykasse for å sikre vedlikeholdbar kode er funksjonen.

🎥 Klikk på bildet over for en video om metoder og funksjoner.

Du kan ta denne leksjonen på Microsoft Learn!

Funksjoner

I sin kjerne er en funksjon en blokk med kode som vi kan kjøre på forespørsel. Dette er perfekt for situasjoner der vi trenger å utføre den samme oppgaven flere ganger; i stedet for å duplisere logikken på flere steder (noe som ville gjort det vanskelig å oppdatere senere), kan vi sentralisere den på ett sted og kalle den når vi trenger operasjonen utført – du kan til og med kalle funksjoner fra andre funksjoner!

Like viktig er evnen til å gi en funksjon et navn. Selv om dette kan virke trivielt, gir navnet en rask måte å dokumentere en del av koden på. Du kan tenke på det som en etikett på en knapp. Hvis jeg klikker på en knapp som sier "Avbryt timer", vet jeg at den vil stoppe klokken.

Opprette og kalle en funksjon

Syntaksen for en funksjon ser slik ut:

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

Hvis jeg ønsket å lage en funksjon for å vise en hilsen, kan den se slik ut:

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

Når vi ønsker å kalle (eller utføre) funksjonen vår, bruker vi navnet på funksjonen etterfulgt av (). Det er verdt å merke seg at funksjonen vår kan defineres før eller etter vi bestemmer oss for å kalle den; JavaScript-kompilatoren vil finne den for deg.

// calling our function
displayGreeting();

NOTE: Det finnes en spesiell type funksjon kjent som en metode, som du allerede har brukt! Faktisk så vi dette i vårt eksempel ovenfor da vi brukte console.log. Det som skiller en metode fra en funksjon er at en metode er knyttet til et objekt (console i vårt eksempel), mens en funksjon er frittstående. Mange utviklere bruker disse begrepene om hverandre.

Beste praksis for funksjoner

Det finnes noen beste praksiser å huske på når du lager funksjoner:

Som alltid, bruk beskrivende navn slik at du vet hva funksjonen gjør
Bruk camelCasing for å kombinere ord
Hold funksjonene dine fokusert på en spesifikk oppgave

Sende informasjon til en funksjon

For å gjøre en funksjon mer gjenbrukbar vil du ofte sende informasjon til den. Hvis vi ser på vårt displayGreeting-eksempel ovenfor, vil det bare vise Hello, world!. Ikke den mest nyttige funksjonen man kan lage. Hvis vi ønsker å gjøre den litt mer fleksibel, som å la noen spesifisere navnet på personen som skal hilses, kan vi legge til en parameter. En parameter (noen ganger kalt et argument) er tilleggsinformasjon som sendes til en funksjon.

Parametere listes opp i definisjonsdelen innenfor parentes og er adskilt med komma, slik som dette:

function name(param, param2, param3) {

}

Vi kan oppdatere vår displayGreeting til å akseptere et navn og vise det.

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

Når vi ønsker å kalle funksjonen vår og sende inn parameteren, spesifiserer vi den i parentesen.

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

Standardverdier

Vi kan gjøre funksjonen vår enda mer fleksibel ved å legge til flere parametere. Men hva om vi ikke ønsker å kreve at hver verdi spesifiseres? Hvis vi holder oss til hilsningseksempelet, kan vi la navnet være obligatorisk (vi må vite hvem vi hilser på), men vi ønsker å tillate at selve hilsningen kan tilpasses etter ønske. Hvis noen ikke ønsker å tilpasse den, gir vi en standardverdi i stedet. For å gi en parameter en standardverdi, setter vi den på samme måte som vi setter en verdi for en variabel - parameterName = 'defaultValue'. For å se et fullstendig eksempel:

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

Når vi kaller funksjonen, kan vi da bestemme om vi vil sette en verdi for salutation.

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

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

Returverdier

Hittil har funksjonene vi har laget alltid skrevet ut til konsollen. Noen ganger kan dette være akkurat det vi ser etter, spesielt når vi lager funksjoner som skal kalle andre tjenester. Men hva om jeg ønsker å lage en hjelpefunksjon for å utføre en beregning og gi verdien tilbake slik at jeg kan bruke den andre steder?

Vi kan gjøre dette ved å bruke en returverdi. En returverdi returneres av funksjonen og kan lagres i en variabel på samme måte som vi kan lagre en bokstavelig verdi som en streng eller et tall.

Hvis en funksjon returnerer noe, brukes nøkkelordet return. Nøkkelordet return forventer en verdi eller referanse til det som returneres, slik som dette:

return myVariable;

Vi kan lage en funksjon for å lage en hilsningsmelding og returnere verdien tilbake til den som kaller funksjonen.

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

Når vi kaller denne funksjonen, lagrer vi verdien i en variabel. Dette er på samme måte som vi ville satt en variabel til en statisk verdi (som const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Funksjoner som parametere for funksjoner

Etter hvert som du utvikler deg som programmerer, vil du komme over funksjoner som aksepterer andre funksjoner som parametere. Dette smarte trikset brukes ofte når vi ikke vet når noe kommer til å skje eller fullføres, men vi vet at vi må utføre en operasjon som svar.

Som et eksempel, vurder setTimeout, som starter en timer og vil utføre kode når den er ferdig. Vi må fortelle den hvilken kode vi vil utføre. Høres ut som en perfekt jobb for en funksjon!

Hvis du kjører koden nedenfor, vil du etter 3 sekunder se meldingen 3 sekunder har gått.

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

Anonyme funksjoner

La oss ta en ny titt på det vi har laget. Vi lager en funksjon med et navn som bare vil bli brukt én gang. Etter hvert som applikasjonen vår blir mer kompleks, kan vi se for oss at vi lager mange funksjoner som bare vil bli kalt én gang. Dette er ikke ideelt. Som det viser seg, trenger vi ikke alltid å gi en funksjon et navn!

Når vi sender en funksjon som en parameter, kan vi hoppe over å lage en på forhånd og i stedet bygge en som en del av parameteren. Vi bruker det samme nøkkelordet function, men bygger den som en parameter.

La oss skrive om koden ovenfor for å bruke en anonym funksjon:

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

Hvis du kjører den nye koden vår, vil du legge merke til at vi får samme resultat. Vi har laget en funksjon, men trengte ikke å gi den et navn!

Fat arrow-funksjoner

En snarvei som er vanlig i mange programmeringsspråk (inkludert JavaScript) er muligheten til å bruke det som kalles en arrow eller fat arrow-funksjon. Den bruker en spesiell indikator =>, som ser ut som en pil – derav navnet! Ved å bruke => kan vi hoppe over nøkkelordet function.

La oss skrive om koden vår en gang til for å bruke en fat arrow-funksjon:

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

Når skal man bruke hver strategi

Du har nå sett at vi har tre måter å sende en funksjon som en parameter på, og lurer kanskje på når du skal bruke hver. Hvis du vet at du kommer til å bruke funksjonen mer enn én gang, lag den som vanlig. Hvis du bare skal bruke den på ett sted, er det generelt best å bruke en anonym funksjon. Om du bruker en fat arrow-funksjon eller den mer tradisjonelle function-syntaksen er opp til deg, men du vil legge merke til at de fleste moderne utviklere foretrekker =>.

🚀 Utfordring

Kan du forklare forskjellen mellom funksjoner og metoder i én setning? Prøv det!

Quiz etter forelesning

Gjennomgang og selvstudium

Det er verdt å lese litt mer om arrow-funksjoner, ettersom de brukes stadig mer i kodebaser. Øv deg på å skrive en funksjon, og skriv den deretter om med denne syntaksen.

Oppgave

Moro med Funksjoner

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

10 KiB Raw Permalink Blame History Unescape Escape