Crearea de funcții în JavaScript

O funcție este o bucată de cod reutilizabilă care rulează atunci când o invoci. Funcțiile vă permit să reutilizați codul, făcându-l mai modular și mai ușor de întreținut.

Există mai multe moduri de a crea funcții în JavaScript. Aici veți învăța diferitele moduri de a crea funcții și cum să le utilizați.

Declarații de funcție: calea simplă

O modalitate prin care puteți crea funcții în JavaScript este prin declarații de funcții. O declarație de funcție este o funcție în JavaScript care urmează sintaxa de mai jos.

funcţiefunctionName(parametrii) {
// codul merge aici...
întoarcere„Aceasta este o declarație de funcție”;
}

Componentele blocului de cod de mai sus includ:

• The funcţie cuvânt cheie: acest cuvânt cheie declară o funcție.
• functionName: Acesta este numele funcției. În practică, ar trebui să fie cât mai descriptiv și semnificativ posibil, indicând ceea ce face funcția.
instagram viewer
• parametrii: Aceasta reprezintă parametrii funcției. Parametrii sunt o listă opțională de variabile pe care le puteți transmite unei funcții atunci când o apelați.
• Corpul funcției: Acesta conține codul pe care funcția îl va rula atunci când o apelați. Este înconjurat de bretele {} și poate conține orice cod JavaScript valid.
• The întoarcere instrucțiune: Această instrucțiune oprește execuția unei funcții și returnează valoarea specificată. În cazul de mai sus, apelarea funcției ar returna șirul „Aceasta este o declarație de funcție”.

De exemplu, declarația funcției de mai jos ia trei numere ca parametri și returnează suma acestora.

funcţieaddThreeNumbers(a, b, c) {
întoarcere a + b + c;
}

Pentru a apela o declarație de funcție în JavaScript, scrieți numele funcției urmat de un set de paranteze (). Dacă funcția preia orice parametri, treceți-i ca argumente între paranteze.

De exemplu:

adaugăTreiNumere(1, 2, 3) // 6

Blocul de cod de mai sus numește addThreeNumber funcţionează şi transmite 1, 2 şi 3 ca argumente funcţiei. Dacă rulați acest cod, va returna valoarea 6.

Palanele JavaScript declarații de funcție, ceea ce înseamnă că le puteți apela înainte de a le defini.

De exemplu:

isHoisted(); // Funcția este ridicată
funcţieeste Ridicat() {
consolă.Buturuga(„Funcția este ridicată”);
întoarcereAdevărat;
}

După cum se arată în blocul de cod de mai sus, apel este Ridicat înainte de a-l defini nu ar arunca o eroare.

Expresii ale funcției: Funcționează ca valori

În JavaScript, puteți defini o funcție ca expresie. Apoi puteți atribui valoarea funcției unei variabile sau o puteți utiliza ca argument unei alte funcții.

Sunt cunoscute și ca funcții anonime, deoarece nu au nume și le puteți apela doar din variabila căreia i-ați atribuit.

Mai jos este sintaxa pentru o expresie a funcției:

const functionName = funcţie () {
întoarcere„Expresia funcției”;
};

Pentru a apela o expresie de funcție în JavaScript, scrieți numele variabilei pe care l-ați atribuit funcției, urmat de un set de paranteze (). Dacă funcția preia orice parametri, treceți-i ca argumente între paranteze.

De exemplu:

functionName(); // Expresia funcției

Expresiile de funcție sunt utile atunci când creați funcții care rulează în alte funcții. Exemplele tipice includ gestionatorii de evenimente și apelurile inverse ale acestora.

De exemplu:

button.addEventListener("clic", funcţie (eveniment) {
consolă.Buturuga(„Ai apăsat pe un buton!”);
});

Exemplul de mai sus a folosit o expresie de funcție care ia un eveniment argument ca un apel înapoi la addEventListener funcţie. Nu trebuie să apelați în mod explicit funcția atunci când utilizați o expresie de funcție ca apel invers. Este apelat automat de funcția sa părinte.

În cazul de mai sus, când ascultătorul evenimentului primește un clic eveniment, apelează funcția de apel invers și trece eveniment obiect ca argument.

Spre deosebire de declarațiile de funcții, expresiile de funcție nu sunt ridicate, așa că nu le puteți apela înainte de a le defini. Încercarea de a accesa o expresie de funcție înainte de a o defini va avea ca rezultat a ReferenceError.

De exemplu:

isHoisted(); // ReferenceError: Nu se poate accesa „isHoisted” înainte de inițializare
const isHoisted = funcţie () {
consolă.Buturuga(„Funcția este ridicată”);
};

Funcții săgeți: Compact și limitat

ES6 a introdus o prescurtare pentru scrierea funcțiilor anonime în JavaScript numită funcții săgeți. Au o sintaxă concisă care vă poate face codul mai lizibil, mai ales când aveți de-a face cu funcții scurte, cu o singură linie.

Spre deosebire de alte metode de a crea funcții, funcțiile săgeată nu necesită funcţie cuvânt cheie. O expresie a funcției săgeată constă din trei părți:

• O pereche de paranteze (()) conţinând parametrii. Puteți omite parantezele dacă funcția are un singur parametru.
• O sageata (=>), care constă dintr-un semn egal (=) și un semn mai mare decât (>).
• O pereche de bretele care conțin corpul funcției. Puteți omite acoladele dacă funcția constă dintr-o singură expresie.

De exemplu:

// Un singur parametru, returnare implicită
const functionName = parametru =>consolă.Buturuga(„Funcția săgeată cu un singur parametru”)
// Parametri multipli, returnare explicită
const functionName = (parametrul_1, parametrul_2) => {
întoarcere„Funcția săgeată cu mai mulți parametri”
};

Când omiteți acoladele, funcția săgeată returnează implicit expresia unică, deci nu este nevoie de întoarcere cuvânt cheie. Pe de altă parte, dacă nu omiteți acoladele, trebuie să returnați în mod explicit o valoare folosind întoarcere cuvânt cheie.

Funcțiile săgeților au, de asemenea, un alt acest obligatoriu în comparație cu funcțiile obișnuite. În funcțiile obișnuite, valoarea lui acest depinde de cum apelezi funcția. Într-o funcție săgeată, acest este întotdeauna legat de acest valoarea domeniului înconjurător.

De exemplu:

const foo = {
 Nume: "Dave",
 salut: funcţie () {
 setTimeout(() => {
consolă.Buturuga(„Bună ziua, mă numesc ${acest.Nume}`);
 }, 1000);
 },
};
foo.greet(); // Înregistrează „Bună ziua, mă numesc Dave” după 1 secundă

În exemplul de mai sus, funcția săgeată din interiorul salut metoda are acces la acest nume, chiar dacă setTimeout funcția îl numește. O funcție normală ar avea ea acest legat de obiectul global.

După cum sugerează și numele, o funcție imediat invocată (IIFE) este o funcție care rulează imediat ce este definită.

Iată structura unui IIFE:

(funcţie () {
// cod aici
})();
(() => {
// cod aici
})();
(funcţie (param_1, param_2) {
consolă.log (param_1 * param_2);
})(2, 3);

Un IIFE constă dintr-o expresie de funcție înfășurată într-o pereche de paranteze. Urmați-l cu o pereche de paranteze în afara incintei pentru a invoca funcția.

Puteți utiliza IIFE-uri pentru a crea domenii, a ascunde detaliile de implementare și a partaja date între mai multe scripturi. Au fost folosite cândva ca a sistem de module în JavaScript.

Crearea unei funcții în mai multe moduri diferite

Înțelegerea modului de a crea funcții în JavaScript este crucială. Acest lucru este valabil pentru o funcție de bază care efectuează un calcul simplu sau o funcție sofisticată care interacționează cu alte părți ale codului dvs.

Puteți utiliza tehnicile discutate mai sus pentru a construi funcții în JavaScript și pentru a structura și organiza codul. Selectați abordarea care se potrivește cel mai bine cerințelor dvs., deoarece fiecare are diverse beneficii și aplicații.