Skapa funktioner i JavaScript

En funktion är en återanvändbar kodbit som körs när du anropar den. Funktioner gör att du kan återanvända kod, vilket gör den mer modulär och lättare att underhålla.

Det finns flera sätt att skapa funktioner i JavaScript. Här får du lära dig de olika sätten att skapa funktioner och hur du använder dem.

Funktionsdeklarationer: The Straightforward Way

Ett sätt du kan skapa funktioner i JavaScript är genom funktionsdeklarationer. En funktionsdeklaration är en funktion i JavaScript som följer syntaxen nedan.

fungerafunktionsnamn(parametrar) {
// koden kommer hit...
lämna tillbaka"Detta är en funktionsdeklaration";
}

Komponenterna i kodblocket ovan inkluderar:

• De fungera nyckelord: Detta nyckelord deklarerar en funktion.
• funktionsnamn: Detta är namnet på funktionen. I praktiken bör den vara så beskrivande och meningsfull som möjligt och ange vad funktionen gör.
instagram viewer
• parametrar: Detta representerar funktionsparametrarna. Parametrar är en valfri lista med variabler som du kan skicka till en funktion när du anropar den.
• Funktionskroppen: Denna innehåller koden som funktionen kommer att köra när du anropar den. Den är omgiven av lockiga hängslen {} och kan innehålla valfri giltig JavaScript-kod.
• De lämna tillbaka sats: Denna sats stoppar en funktions exekvering och returnerar det angivna värdet. I fallet ovan skulle anrop av funktionen returnera strängen "Detta är en funktionsdeklaration".

Till exempel tar funktionsdeklarationen nedan tre tal som parametrar och returnerar deras summa.

fungeralägg tillThreeNumbers(a, b, c) {
lämna tillbaka a + b + c;
}

För att anropa en funktionsdeklaration i JavaScript, skriv funktionsnamnet följt av en uppsättning parenteser (). Om funktionen tar några parametrar, skicka dem som argument inom parentes.

Till exempel:

addThreeNumbers(1, 2, 3) // 6

Kodblocket ovan kallar addThreeNumber fungerar och skickar 1, 2 och 3 som argument till funktionen. Om du kör den här koden kommer den att returnera värdet 6.

JavaScript-hissar funktionsdeklarationer, vilket innebär att du kan anropa dem innan du definierar dem.

Till exempel:

isHoisted(); // Funktion är hissad
fungeraär upplyft() {
trösta.logga("Funktionen är upplyft");
lämna tillbakaSann;
}

Som visas i kodblocket ovan, ringer är upplyft innan du definierar det skulle det inte skapa ett fel.

Funktionsuttryck: Fungerar som värden

I JavaScript kan du definiera en funktion som ett uttryck. Du kan sedan tilldela funktionsvärdet till en variabel eller använda det som ett argument till en annan funktion.

De är också kända som anonyma funktioner eftersom de inte har några namn, och du kan bara anropa dem från variabeln du tilldelade dem.

Nedan är syntaxen för ett funktionsuttryck:

konst funktionsnamn = fungera () {
lämna tillbaka"Funktionsuttryck";
};

För att anropa ett funktionsuttryck i JavaScript, skriv variabelnamnet du tilldelade funktionen följt av en uppsättning parenteser (). Om funktionen tar några parametrar, skicka dem som argument inom parentes.

Till exempel:

funktionsnamn(); // Funktionsuttryck

Funktionsuttryck är praktiska när du skapar funktioner som körs i andra funktioner. Typiska exempel inkluderar händelsehanterare och deras återuppringningar.

Till exempel:

button.addEventListener("klick", fungera (händelse) {
trösta.logga("Du klickade på en knapp!");
});

Exemplet ovan använde ett funktionsuttryck som tar an händelse argument som en återuppringning till addEventListener fungera. Du behöver inte anropa funktionen explicit när du använder ett funktionsuttryck som återuppringning. Den anropas automatiskt av sin överordnade funktion.

I fallet ovan, när evenemangslyssnaren får en klick händelse, anropar den återuppringningsfunktionen och skickar händelse objekt som argument.

Till skillnad från funktionsdeklarationer hissas inte funktionsuttryck, så du kan inte anropa dem innan du definierar dem. Att försöka komma åt ett funktionsuttryck innan du definierar det kommer att resultera i en Referensfel.

Till exempel:

isHoisted(); // ReferenceError: Kan inte komma åt 'isHoisted' före initiering
konst ärHist = fungera () {
trösta.logga("Funktionen är upplyft");
};

Pilfunktioner: Kompakt och begränsad

ES6 introducerade en stenografi för att skriva anonyma funktioner i JavaScript som kallas pilfunktioner. De har en kortfattad syntax som kan göra din kod mer läsbar, särskilt när det handlar om korta enradsfunktioner.

Till skillnad från andra metoder för att skapa funktioner, kräver inte pilfunktioner fungera nyckelord. Ett pilfunktionsuttryck består av tre delar:

• Ett par parenteser (()) som innehåller parametrarna. Du kan utelämna parentesen om funktionen bara har en parameter.
• En pil (=>), som består av ett likhetstecken (=) och ett större än-tecken (>).
• Ett par lockiga hängslen som innehåller funktionskroppen. Du kan utelämna de lockiga klammerparenteserna om funktionen består av ett enda uttryck.

Till exempel:

// Enstaka parameter, implicit retur
konst funktionsnamn = parameter =>trösta.logga("Enstaka parameter pilfunktion")
// Flera parametrar, explicit retur
konst funktionsnamn = (parameter_1, parameter_2) => {
lämna tillbaka"Pilfunktion för flera parametrar"
};

När du utelämnar de lockiga klammerparenteserna returnerar pilfunktionen implicit det enda uttrycket, så det finns inget behov av lämna tillbaka nyckelord. Å andra sidan, om du inte utelämnar de lockiga hängslen, måste du uttryckligen returnera ett värde med hjälp av lämna tillbaka nyckelord.

Pilfunktioner har också en annan detta bindande jämfört med vanliga funktioner. I vanliga funktioner är värdet av detta beror på hur du anropar funktionen. I en pilfunktion, detta är alltid bunden till detta värdet av den omgivande räckvidden.

Till exempel:

konst foo = {
 namn: "Dave",
 hälsa: fungera () {
 setTimeout(() => {
trösta.logga("Hej, jag heter ${detta.namn}`);
 }, 1000);
 },
};
foo.greet(); // Loggar "Hej, jag heter Dave" efter 1 sekund

I exemplet ovan fungerar pilen inuti hälsa metod har tillgång till detta namnet, även om setTimeout funktionen kallar det. En normal funktion skulle ha sin detta bunden till det globala objektet.

Som namnet antyder är en omedelbart anropad funktion (IIFE) en funktion som körs så snart den har definierats.

Här är strukturen för en IIFE:

(fungera () {
// kod här
})();
(() => {
// kod här
})();
(fungera (param_1, param_2) {
trösta.log (param_1 * param_2);
})(2, 3);

En IIFE består av ett funktionsuttryck lindat inuti ett par parenteser. Följ den med ett par parenteser utanför höljet för att anropa funktionen.

Du kan använda IIFE: er för att skapa scopes, dölja implementeringsdetaljer och dela data mellan flera skript. De användes en gång som en modulsystem i JavaScript.

Skapa en funktion på många olika sätt

Att förstå hur man skapar funktioner i JavaScript är avgörande. Detta gäller för en grundläggande funktion som utför en enkel beräkning eller en sofistikerad funktion som interagerar med andra delar av din kod.

Du kan använda teknikerna som diskuterats ovan för att bygga funktioner i JavaScript och strukturera och organisera din kod. Välj det tillvägagångssätt som bäst passar dina krav, eftersom alla har olika fördelar och tillämpningar.