Sådan defineres funktioner i JavaScript

introduktion

en funktion er en blok kode, der udfører en handling eller returnerer en værdi. Funktioner er brugerdefineret kode defineret af programmører, der kan genbruges, og kan derfor gøre dine programmer mere modulære og effektive.

i denne vejledning lærer vi flere måder at definere en funktion på, kalde en funktion og bruge funktionsparametre i JavaScript.

definition af en funktion

funktioner defineres eller erklæres medfunction nøgleord. Nedenfor er syntaksen for en funktion i JavaScript.,

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

erklæringen begynder medfunction nøgleord, efterfulgt af navnet på funktionen. Funktionsnavne følger de samme regler som variabler-de kan indeholde bogstaver, tal, understregninger og dollartegn og skrives ofte i camel case. Navnet efterfølges af et sæt parenteser, som kan bruges til valgfrie parametre. Koden for funktionen er indeholdt i krøllede parenteser, ligesom en for erklæring eller en if-erklæring.,

i vores første eksempel laver vi en funktionserklæring for at udskrive en hilsen til konsollen.

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

Her har vi koden til at udskrive Hello, World! til konsollen, der er indeholdt inde i greet() funktion. Der sker dog intet, og ingen kode udføres, før vi påberåber os eller kalder funktionen. Du kan påberåbe sig en funktion ved at skrive navnet på den funktion efterfulgt af parenteserne.

// Invoke the functiongreet();

nu vil vi sætte dem sammen, definere vores funktion og påberåbe det.

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

med opkaldet til greet();, vil funktionen køre, og vi vil modtage Hello, World! som programmets output.

Output
Hello, World!

nu har vi vores greet() kode indeholdt i en funktion, og kan genbruge det så mange gange som vi ønsker.

Ved hjælp af parametre kan vi gøre koden mere dynamisk.

funktionsparametre

i voresgreet.jsfil oprettede vi en grundlæggende funktion, der udskriverHello, World til konsollen., Ved hjælp af parametre kan vi tilføje yderligere funktionalitet, der gør koden mere fleksibel. Parametre er input, der bliver overført til funktioner som navne og opfører sig som lokale variabler.

Når en bruger logger ind på et program, vil vi måske have programmet til at hilse dem ved navn, i stedet for bare at sige, “Hej, Verden!”.

Vi tilføjer en parameter i Vores funktion, kaldet name, for at repræsentere navnet på den person, der bliver mødt.,

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

navnet på funktionen er greet, og nu har vi en enkelt parameter inde i parenteserne. Navnet på parameteren følger de samme regler som at navngive en variabel. Inde i funktionen, i stedet for en statisk streng bestående af Hello, World, vi har en skabelon literal string, der indeholder vores parameter, som nu opfører sig som en lokal variabel.

du vil bemærke, at vi ikke har defineret vores name parameter overalt. Vi tildeler det en værdi, når vi påberåber vores funktion., Forudsat at vores bruger hedder Sammy, kalder vi funktionen og placerer brugernavnet som argument. Argumentet er den faktiske værdi, der overføres til funktionen, i dette tilfælde er det strengen "Sammy".

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

værdien af "Sammy"overføres til funktionen gennem parameteren name. Nu hver gang name bruges i hele funktionen, repræsenterer den "Sammy" værdi. Her er hele koden.

Når vi kører programmet ovenfor, modtager vi følgende output.

Output
Hello, Sammy!

nu har vi et eksempel på, hvordan en funktion kan genbruges. I et eksempel fra den virkelige verden ville funktionen trække brugernavnet fra en database i stedet for direkte at levere navnet som argumentværdi.

ud over parametre kan variabler erklæres inde i funktioner. Disse variabler er kendt som lokale variabler, og vil kun eksistere inden for rammerne af deres egen funktionsblok., Variabelt omfang bestemmer variablernes tilgængelighed; variabler, der er defineret inde i en funktion, er ikke tilgængelige uden for funktionen, men de kan bruges så mange gange som deres funktion bruges i hele ET program.

returværdier

der kan anvendes mere end .n parameter i en funktion. Vi kan overføre flere værdier til en funktion og returnere en værdi. Vi opretter en funktion til at finde summen af to værdier, repræsenteret af x og y.

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

I programmet ovenfor, har vi defineret en funktion med parametre x og y, og derefter gik de værdier af 9 og 7 for at vælge den ønskede funktion. Når vi kører programmet, modtager vi summen af disse tal som output.

Output
16

i dette tilfælde returnerede programmet 9 og 7 til sum() funktionen 16.,

Når return nøgleord bruges, ophører funktionen med at udføre, og værdien af udtrykket returneres. Selvom bro .seren i dette tilfælde viser værdien i konsollen, er den ikke den samme som at bruge console.log() til at udskrive til konsollen. Aktivering af funktionen udsender værdien nøjagtigt, hvor funktionen blev påberåbt. Denne værdi kan bruges med det samme eller placeres i en variabel.

Funktionsudtryk

i det sidste afsnit brugte vi en funktionserklæring til at få summen af to tal og returnere den værdi., Vi kan også oprette et funktionsudtryk ved at tildele en funktion til en variabel.

Ved hjælp af vores samme add funktionseksempel kan vi direkte anvende den returnerede værdi til en variabel, i dette tilfælde sum.

// 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 er sum konstant en funktion. Vi kan gøre dette udtryk mere kortfattet ved at omdanne det til en anonym funktion, som er en navngivet funktion., I øjeblikket har vores funktion navnet add, men med funktionsudtryk er det ikke nødvendigt at navngive funktionen, og navnet udelades normalt.

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

Output
103

I dette eksempel, at vi har fjernet navnet på den funktion, som var add, og forvandlet den til en anonym funktion. Et navngivet funktionsudtryk kunne bruges til at hjælpe med fejlfinding, men det udelades normalt.,

Pilefunktioner

indtil videre har vi gennemgået, hvordan vi definerer funktioner ved hjælp af function nøgleord. Der er dog en nyere, mere kortfattet metode til at definere en funktion kendt som pilefunktion udtryk som ECMAScript 6. Pilefunktioner, som de er almindeligt kendt, er repræsenteret af et lighedstegn efterfulgt af et større end tegn: =>.

Pilefunktioner er altid anonyme funktioner og en type funktionsudtryk. Vi kan oprette et grundlæggende eksempel for at finde produktet af to tal.arro .function.,js

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

Output
120

i Stedet for at skrive søgeord function vi bruger => pil for at angive en funktion. Ellers, det virker på samme måde som en almindelig funktion udtryk, med nogle avancerede forskelle, som du kan læse om under Pil Funktioner på Mozilla Developer Netværk.

i tilfælde af kun en parameter kan parenteserne udelukkes. I dette eksempel kvadrerer vi x, hvilket kun kræver, at et nummer overføres som et argument., Parenteserne er udeladt.

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

Output
64

Bemærk: I tilfælde af ingen parametre, et tomt sæt af parenteser () er krævet i pil funktioner.

Med disse særlige eksempler, der kun består af en return – erklæring, tillader pilefunktioner syntaksen at blive reduceret yderligere. Hvis funktionen kun er en enkelt linje return, kan både de krøllede parenteser og return – sætningen udelades, som det ses i eksemplet nedenfor.,

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

Output
100

alle tre af disse typer syntaks resulterer i samme output. Det er generelt et spørgsmål om præference eller virksomhedskodningsstandarder at beslutte, hvordan du vil strukturere dine egne funktioner.

konklusion

i denne vejledning dækkede vi funktionsdeklarationer og funktionsudtryk, returnerede værdier fra funktioner, tildelte funktionsværdier til variabler og ES6 pilefunktioner.

funktioner er blokke af kode, der returnerer en værdi eller udfører en handling, hvilket gør programmer skalerbare og modulære.