Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

En funksjon er en gjenbrukbar kode som kjører når du starter den. Funksjoner lar deg gjenbruke kode, noe som gjør den mer modulær og enklere å vedlikeholde.

Det er flere måter å lage funksjoner i JavaScript på. Her vil du lære de ulike måtene å lage funksjoner på og hvordan du bruker dem.

Funksjonserklæringer: The Straightforward Way

En måte du kan lage funksjoner i JavaScript på er gjennom funksjonserklæringer. En funksjonserklæring er en funksjon i JavaScript som følger syntaksen nedenfor.

funksjonfunksjonsnavn(parametere) {
// koden går her...
komme tilbake"Dette er en funksjonserklæring";
}

Komponentene i kodeblokken ovenfor inkluderer:

  • De funksjon nøkkelord: Dette nøkkelordet erklærer en funksjon.
  • funksjonsnavn: Dette er navnet på funksjonen. I praksis bør den være så beskrivende og meningsfull som mulig, og angi hva funksjonen gjør.
  • parametere
    instagram viewer
    : Dette representerer funksjonsparametrene. Parametre er en valgfri liste over variabler som du kan sende til en funksjon når du kaller den.
  • Funksjonskroppen: Denne inneholder koden som funksjonen vil kjøre når du kaller den. Den er omgitt av krøllete seler {} og kan inneholde hvilken som helst gyldig JavaScript-kode.
  • De komme tilbake setning: Denne setningen stopper kjøringen av en funksjon og returnerer den angitte verdien. I tilfellet ovenfor vil å kalle funksjonen returnere strengen "Dette er en funksjonserklæring".

For eksempel tar funksjonsdeklarasjonen nedenfor tre tall som parametere og returnerer summen deres.

funksjonlegg tilThreeNumbers(a, b, c) {
komme tilbake a + b + c;
}

For å kalle en funksjonserklæring i JavaScript, skriv funksjonsnavnet etterfulgt av et sett med parenteser (). Hvis funksjonen tar noen parametere, send dem som argumenter innenfor parentes.

For eksempel:

addThreeNumbers(1, 2, 3) // 6

Kodeblokken ovenfor kaller addThreeNumber funksjoner og sender 1, 2 og 3 som argumenter til funksjonen. Hvis du kjører denne koden, vil den returnere verdien 6.

JavaScript taljer funksjonserklæringer, noe som betyr at du kan kalle dem før du definerer dem.

For eksempel:

erHeist(); // Funksjon er heist
funksjoner heist() {
konsoll.Logg("Funksjonen er heist");
komme tilbakeekte;
}

Som vist i kodeblokken ovenfor, ringer er heist før du definerer det ville det ikke gi en feil.

Funksjonsuttrykk: Fungerer som verdier

I JavaScript kan du definere en funksjon som et uttrykk. Du kan deretter tilordne funksjonsverdien til en variabel eller bruke den som et argument til en annen funksjon.

De er også kjent som anonyme funksjoner siden de ikke har noen navn, og du kan bare kalle dem fra variabelen du tilordnet dem til.

Nedenfor er syntaksen for et funksjonsuttrykk:

konst funksjonsnavn = funksjon () {
komme tilbake"Funksjonsuttrykk";
};

For å kalle et funksjonsuttrykk i JavaScript, skriv variabelnavnet du tilordnet funksjonen etterfulgt av et sett med parenteser (). Hvis funksjonen tar noen parametere, send dem som argumenter innenfor parentes.

For eksempel:

funksjonsnavn(); // Funksjonsuttrykk

Funksjonsuttrykk er nyttige når du lager funksjoner som kjører i andre funksjoner. Typiske eksempler inkluderer hendelsesbehandlere og deres tilbakeringinger.

For eksempel:

button.addEventListener("klikk", funksjon (begivenhet) {
konsoll.Logg("Du klikket på en knapp!");
});

Eksemplet ovenfor brukte et funksjonsuttrykk som tar en begivenhet argument som en tilbakeringing til addEventListener funksjon. Du trenger ikke å kalle funksjonen eksplisitt når du bruker et funksjonsuttrykk som tilbakeringing. Den blir automatisk kalt opp av overordnet funksjon.

I tilfellet ovenfor, når hendelseslytteren mottar en klikk hendelsen kaller den tilbakeringingsfunksjonen og sender den begivenhet objekt som argument.

I motsetning til funksjonserklæringer, heises ikke funksjonsuttrykk, så du kan ikke kalle dem før du definerer dem. Å prøve å få tilgang til et funksjonsuttrykk før du definerer det vil resultere i en ReferenceError.

For eksempel:

erHeist(); // ReferenceError: Får ikke tilgang til 'isHoisted' før initialisering
konst erHeist = funksjon () {
konsoll.Logg("Funksjonen er heist");
};

Pilfunksjoner: Kompakt og begrenset

ES6 introduserte en stenografi for å skrive anonyme funksjoner i JavaScript kalt pilfunksjoner. De har en kortfattet syntaks som kan gjøre koden din mer lesbar, spesielt når du har å gjøre med korte enkeltlinjefunksjoner.

I motsetning til andre metoder for å lage funksjoner, krever ikke pilfunksjoner funksjon nøkkelord. Et pilfunksjonsuttrykk består av tre deler:

  • Et par parenteser (()) som inneholder parameterne. Du kan utelate parentesene hvis funksjonen bare har én parameter.
  • En pil (=>), som består av et likhetstegn (=) og et større enn-tegn (>).
  • Et par krøllete seler som inneholder funksjonskroppen. Du kan utelate de krøllete klammeparentesene hvis funksjonen består av et enkelt uttrykk.

For eksempel:

// Enkelt parameter, implisitt retur
konst funksjonsnavn = parameter =>konsoll.Logg("Enkelt parameter pilfunksjon")
// Flere parametere, eksplisitt retur
konst funksjonsnavn = (parameter_1, parameter_2) => {
komme tilbake"Pilfunksjon med flere parametere"
};

Når du utelater de krøllete klammeparentesene, returnerer pilfunksjonen implisitt enkeltuttrykket, så det er ikke nødvendig med komme tilbake nøkkelord. På den annen side, hvis du ikke utelater de krøllete klammeparentesene, må du eksplisitt returnere en verdi ved å bruke komme tilbake nøkkelord.

Pilfunksjoner har også en annen dette bindende sammenlignet med vanlige funksjoner. I vanlige funksjoner er verdien av dette avhenger av hvordan du kaller funksjonen. I en pilfunksjon, dette er alltid bundet til dette verdien av det omkringliggende omfanget.

For eksempel:

konst foo = {
 Navn: "Dave",
 hilse på: funksjon () {
 setTimeout(() => {
konsoll.Logg(`Hei, jeg heter ${dette.Navn}`);
 }, 1000);
 },
};
foo.hilsen(); // Logger "Hei, jeg heter Dave" etter 1 sekund

I eksemplet ovenfor er pilfunksjonen inne i hilse på metoden har tilgang til dette.navnet, selv om setTimeout funksjonen kaller det. En normal funksjon ville ha sitt dette bundet til det globale objektet.

Som navnet tilsier, er en umiddelbart påkalt funksjon (IIFE) en funksjon som kjører så snart den er definert.

Her er strukturen til en IIFE:

(funksjon () {
// kode her
})();
(() => {
// kode her
})();
(funksjon (param_1, param_2) {
konsoll.log (param_1 * param_2);
})(2, 3);

En IIFE består av et funksjonsuttrykk pakket inn i et par parenteser. Følg den med et par parenteser utenfor kabinettet for å starte funksjonen.

Du kan bruke IIFE-er til å lage omfang, skjule implementeringsdetaljer og dele data mellom flere skript. De ble en gang brukt som en modulsystem i JavaScript.

Opprette en funksjon på mange forskjellige måter

Å forstå hvordan du lager funksjoner i JavaScript er avgjørende. Dette gjelder for en grunnleggende funksjon som utfører en enkel beregning eller en sofistikert funksjon som samhandler med andre deler av koden din.

Du kan bruke teknikkene diskutert ovenfor for å bygge funksjoner i JavaScript og strukturere og organisere koden din. Velg den tilnærmingen som passer best for dine krav, siden hver har ulike fordeler og bruksområder.