Så här definierar du funktioner i JavaScript

introduktion

en funktion är ett kodblock som utför en åtgärd eller returnerar ett värde. Funktioner är anpassad kod definieras av programmerare som är återanvändbara, och kan därför göra dina program mer modulära och effektiva.

i den här handledningen lär vi oss flera sätt att definiera en funktion, ringa en funktion och använda funktionsparametrar i JavaScript.

definiera en funktion

funktioner definieras, eller deklareras, med nyckelordetfunction. Nedan är syntaxen för en funktion i JavaScript.,

function nameOfFunction() { // Code to be executed}

deklarationen börjar med nyckelordetfunction följt av namnet på funktionen. Funktionsnamn följer samma regler som variabler – de kan innehålla bokstäver, siffror, understreck och dollartecken och skrivs ofta i camel case. Namnet följs av en uppsättning parenteser, som kan användas för valfria parametrar. Koden för funktionen finns i lockiga fästen, precis som en för uttalande eller en if uttalande.,

i vårt första exempel gör vi en funktionsdeklaration för att skriva ut en hälsning till konsolen.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Här har vi koden för att skriva utHello, World! till konsolen som finns inuti funktionengreet(). Men ingenting kommer att hända och ingen kod kommer att köras tills vi åberopar, eller ring funktionen. Du kan aktivera en funktion genom att skriva namnet på funktionen följt av parenteserna.

// Invoke the functiongreet();

Nu kommer vi att sätta ihop dem, definiera vår funktion och åberopa den.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

med anropet för greet(); kommer funktionen att köras och vi kommer att få Hello, World! som programmets utgång.

Output
Hello, World!

nu har vi vårgreet() – kod som finns i en funktion och kan återanvända den så många gånger vi vill.

med hjälp av parametrar kan vi göra koden mer dynamisk.

funktionsparametrar

i vårgreet.js – fil skapade vi en grundläggande funktion som skriver utHello, World till konsolen., Med hjälp av parametrar kan vi lägga till ytterligare funktionalitet som gör koden mer flexibel. Parametrar är inmatning som skickas in i funktioner som namn och beter sig som lokala variabler.

När en användare loggar in på ett program kanske vi vill att programmet hälsar dem med namn, istället för att bara säga ” Hej, världen!”.

vi lägger till en parameter i vår funktion, som heter name, för att representera namnet på den person som hälsas.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

namnet på funktionen ärgreet, och nu har vi en enda parameter inom parenteserna. Parameterns namn följer samma regler som att namnge en variabel. I stället för en statisk sträng som består av Hello, World har vi en bokstavlig Mallsträng som innehåller vår parameter, som nu fungerar som en lokal variabel.

Du kommer att märka att vi inte har definierat vårname parameter någonstans. Vi tilldelar det ett värde när vi åberopar vår funktion., Förutsatt att vår användare heter Sammy, ringer vi funktionen och placerar användarnamnet som argumentet. Argumentet är det faktiska värdet som överförs till funktionen, i det här fallet är det strängen "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

värdet på"Sammy" överförs till funktionen genom parameternname. Nu varje gångname används i hela funktionen, kommer den att representera värdet"Sammy". Här är hela koden.

När vi kör programmet ovan får vi följande utgång.

Output
Hello, Sammy!

nu har vi ett exempel på hur en funktion kan återanvändas. I en verklig värld exempel, funktionen skulle dra användarnamnet från en databas i stället för att direkt leverera namnet som ett argument värde.

förutom parametrar kan variabler deklareras inuti funktioner. Dessa variabler är kända som lokala variabler, och kommer endast att existera inom ramen för sitt eget funktionsblock., Variabeln omfattning bestämmer variablernas tillgänglighet; variabler som definieras inuti en funktion är inte tillgängliga från utsidan av funktionen, men de kan användas så många gånger som deras funktion används i hela ETT program.

returvärden

fler än en parameter kan användas i en funktion. Vi kan skicka flera värden till en funktion och returnera ett värde. Vi kommer att skapa en funktion för att hitta summan av två värden, representerade av xochy.

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

i programmet ovan definierade vi en funktion med parametrarna x och y och passerade sedan värdena för 9 och 7 till funktionen. När vi kör programmet får vi summan av dessa siffror som utgången.

Output
16

i detta fall, med 9 och 7 skickas till funktionen sum(), återvände programmet 16.,

När nyckelordetreturn används upphör funktionen att exekvera och värdet på uttrycket returneras. Även om webbläsaren i det här fallet visar värdet i konsolen är det inte detsamma som att använda console.log() för att skriva ut till konsolen. Om funktionen anropas matas värdet ut exakt där funktionen anropades. Detta värde kan användas omedelbart eller placeras i en variabel.

funktionsuttryck

i det sista avsnittet använde vi en funktionsdeklaration för att få summan av två siffror och returnera det värdet., Vi kan också skapa ett funktionsuttryck genom att tilldela en funktion till en variabel.

med sammaadd funktionsexempel kan vi direkt tillämpa det returnerade värdet på en variabel, i detta fallsum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

nu är sum – konstanten en funktion. Vi kan göra detta uttryck mer koncist genom att göra det till en anonym funktion, vilket är en namnlös funktion., För närvarande har vår funktion namnet add, men med funktionsuttryck är det inte nödvändigt att namnge funktionen och namnet utelämnas vanligtvis.

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

i det här exemplet har vi tagit bort namnet på funktionen, som var add, och förvandlat den till en anonym funktion. Ett namngivet funktionsuttryck kan användas för att hjälpa till vid felsökning, men det är vanligtvis utelämnat.,

Arrow Functions

hittills har vi gått igenom hur man definierar funktioner med hjälp avfunction nyckelordet. Det finns dock en nyare, mer koncis metod för att definiera en funktion som kallas pilfunktion uttryck som ECMAScript 6. Pilfunktioner, som de är allmänt kända, representeras av ett likhetstecken följt av ett större än tecken: =>.

Arrow funktioner är alltid anonyma funktioner och en typ av funktion uttryck. Vi kan skapa ett grundläggande exempel för att hitta produkten av två nummer.

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

istället för att skriva ut sökordet function använder vi pilen => för att indikera en funktion. Annars fungerar det på samma sätt som ett reguljärt funktionsuttryck, med några avancerade skillnader som du kan läsa om under Arrow-funktioner på Mozilla Developer Network.

När det gäller endast en parameter kan parenteserna uteslutas. I det här exemplet kvadrerar vi x, vilket bara kräver att ett nummer skickas som ett argument., Parenteserna har utelämnats.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Obs! Om inga parametrar saknas krävs en tom uppsättning parenteser() I pilfunktionerna.

med dessa exempel som bara består av ettreturn – uttalande tillåter pilfunktionerna att syntaxen minskas ytterligare. Om funktionen bara är en enda radreturn kan både de lockiga konsolerna ochreturn – satsen utelämnas, vilket framgår av exemplet nedan.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

alla tre av dessa typer av syntax resulterar i samma utgång. Det är i allmänhet en fråga om preferens eller företagets kodningsstandarder för att bestämma hur du ska strukturera dina egna funktioner.

slutsats

i denna handledning omfattade vi funktionsdeklarationer och funktionsuttryck, returnerar värden från funktioner, tilldelar funktionsvärden till variabler och ES6-pilfunktioner.

funktioner är kodblock som returnerar ett värde eller utför en åtgärd, vilket gör programmen skalbara och modulära.