Cum se definesc funcțiile în JavaScript

Introducere

o funcție este un bloc de cod care efectuează o acțiune sau returnează o valoare. Funcțiile sunt cod personalizat definit de programatori care sunt reutilizabile, și, prin urmare, poate face programele mai modulare și eficiente.în acest tutorial, vom învăța mai multe moduri de a defini o funcție, de a apela o funcție și de a folosi parametrii funcției în JavaScript.

definirea unei funcții

funcțiile sunt definite sau declarate cu cuvântul cheiefunction. Mai jos este sintaxa pentru o funcție în JavaScript.,

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

declarația începe cu function cuvinte cheie, urmat de numele funcției. Numele funcțiilor respectă aceleași reguli ca și variabilele — ele pot conține litere, numere, sublinieri și semne în dolari și sunt frecvent scrise în caz de cămilă. Numele este urmat de un set de paranteze, care pot fi utilizate pentru parametrii opționali. Codul funcției este conținut în paranteze ondulate, la fel ca o declarație pentru sau o declarație if.,

în primul nostru exemplu, vom face o declarație de funcții pentru a imprima o declarație de salut pe consolă.

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

Aici avem codul pentru a imprima Hello, World! la consola conținute în interiorul greet() function. Cu toate acestea, nu se va întâmpla nimic și niciun cod nu se va executa până nu invocăm sau apelăm funcția. Puteți invoca o funcție scriind numele funcției urmate de paranteze.

// Invoke the functiongreet();

acum le vom pune împreună, definind funcția noastră și invocând-o.

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

Cu apelul pentru greet();, funcția va rula și vom primi Hello, World! ca programul e de ieșire.

Output
Hello, World!

Acum avem greet() cod conținute într-o funcție, și poate reutiliza ori de câte ori vrem.folosind parametrii, putem face Codul mai dinamic.

Parametrii Funcției

În greet.js fișier, am creat o funcție de bază care imprimă Hello, World la consola., Folosind parametrii, putem adăuga funcționalități suplimentare care vor face Codul mai flexibil. Parametrii sunt de intrare care obține trecut în funcții ca nume și să se comporte ca variabile locale.

când un utilizator se conectează la o aplicație, este posibil să dorim ca programul să-i salute după nume, în loc să spună doar: „Bună ziua, lume!”.

vom adăuga un parametru în funcția noastră, numit name, pentru a reprezenta numele persoanei întâmpinate.,

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

numele funcției este greet, și acum avem un singur parametru în interiorul paranteze. Numele parametrului urmează aceleași reguli ca denumirea unei variabile. În interiorul funcției, în loc de un șir static format din Hello, World, avem un șir literal de șablon care conține parametrul nostru, care se comportă acum ca o variabilă locală.

veți observa că nu am definit parametrul name nicăieri. Îi atribuim o valoare atunci când invocăm funcția noastră., Presupunând că utilizatorul nostru se numește Sammy, vom apela funcția și vom plasa numele de utilizator ca argument. Argumentul este valoarea reală care este trecută în funcție, în acest caz este șirul "Sammy".

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

valoarea "Sammy" este trecut în funcția prin name parametru. Acum, de fiecare dată când name este utilizat în întreaga funcție, acesta va reprezenta valoarea "Sammy". Aici este întregul cod.

când rulăm programul de mai sus, vom primi următoarea ieșire.

Output
Hello, Sammy!

acum avem un exemplu de modul în care o funcție poate fi refolosită. Într-un exemplu din lumea reală, funcția ar trage numele de utilizator dintr-o bază de date în loc să furnizeze direct numele ca valoare argument.în plus față de parametri, variabilele pot fi declarate în interiorul funcțiilor. Aceste variabile sunt cunoscute ca variabile locale și vor exista doar în interiorul domeniului de aplicare al propriului bloc de funcții., Variable scope determină accesibilitatea variabilelor; variabilele care sunt definite în interiorul unei funcții nu sunt accesibile din afara funcției, dar pot fi utilizate de câte ori funcția lor este utilizată pe parcursul unui program.

returnarea valorilor

Mai mult de un parametru poate fi utilizat într-o funcție. Putem trece mai multe valori într-o funcție și să returneze o valoare. Vom crea o funcție pentru a găsi suma a două valori, reprezentată prin x și y.

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

În cadrul programului de mai sus, am definit o funcție cu parametri x și y, și apoi a trecut la valori de 9 și 7 la funcție. Când vom rula programul, vom primi suma acestor numere ca ieșire.

Output
16

În acest caz, cu 9 și 7 trecut sum() funcția, programul a revenit 16.,

când se utilizează cuvântul cheie return, funcția încetează să se execute și valoarea expresiei este returnată. Deși în acest caz browserul va afișa valoarea în consolă, nu este același lucru cu utilizarea console.log() pentru a imprima pe consolă. Invocarea funcției va afișa valoarea exact unde a fost invocată funcția. Această valoare poate fi utilizată imediat sau plasată într-o variabilă.

expresii funcționale

în ultima secțiune, am folosit o declarație de funcții pentru a obține suma a două numere și a returna acea valoare., De asemenea, putem crea o expresie a funcției prin atribuirea unei funcții unei variabile.folosind același exemplu de funcție add, putem aplica direct valoarea returnată unei variabile, în acest caz 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

sum constanta este o funcție. Putem face această expresie mai concisă transformând-o într-o funcție anonimă, care este o funcție fără nume., În prezent, funcția noastră are numele add, dar cu expresii funcționale nu este necesar să denumim funcția și numele este de obicei omis.

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

Output
103

În acest exemplu, am eliminat numele funcției, care a fost add, și a transformat-o într-o funcție anonim. O expresie numită funcție ar putea fi folosite pentru a ajuta la depanare, dar este de obicei omisă.,până în prezent, am trecut prin modul de definire a funcțiilor folosind cuvântul cheie function. Cu toate acestea, există o metodă mai nouă și mai concisă de definire a unei funcții cunoscute sub numele de expresii ale funcției arrow din ECMAScript 6. Funcțiile săgeată, așa cum sunt cunoscute în mod obișnuit, sunt reprezentate de un semn egal urmat de un semn mai mare decât: =>.funcțiile săgeată sunt întotdeauna funcții anonime și un tip de expresie a funcției. Putem crea un exemplu de bază pentru a găsi produsul a două numere.

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

Output
120

în Loc de a scrie cuvântul cheie function, vom folosi => săgeată pentru a indica o funcție. În caz contrar, funcționează similar cu o expresie obișnuită a funcției, cu unele diferențe avansate despre care puteți citi sub funcțiile săgeată din Rețeaua de dezvoltatori Mozilla.

în cazul unui singur parametru, parantezele pot fi excluse. În acest exemplu, suntem Cuadratura x, care necesită doar un singur număr pentru a fi trecut ca argument., Parantezele au fost omise.

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

Output
64

Notă: în cazul În care nu parametrilor, un set gol de paranteze () este necesară în săgeată funcții.cu aceste exemple particulare care constau doar dintr-o instrucțiune return, funcțiile săgeată permit ca sintaxa să fie redusă și mai mult. Dacă funcția este doar o singură linie return, atât acolade și return declarație poate fi omis, așa cum se vede în exemplul de mai jos.,

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

Output
100

Toate aceste trei tipuri de sintaxă duce la același rezultat. În general, este o chestiune de preferințe sau standarde de codificare a companiei pentru a decide cum vă veți structura propriile funcții.

concluzie

În acest tutorial, am acoperit declarațiile funcțiilor și expresiile funcțiilor, returnarea valorilor din funcții, atribuirea valorilor funcțiilor variabilelor și funcțiile săgeată ES6.funcțiile sunt blocuri de cod care returnează o valoare sau efectuează o acțiune, făcând programele scalabile și modulare.