Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Funkcija je višekratni dio koda koji se pokreće kada je pozovete. Funkcije vam omogućuju ponovnu upotrebu koda, čineći ga modularnijim i lakšim za održavanje.

Postoji nekoliko načina za stvaranje funkcija u JavaScriptu. Ovdje ćete naučiti različite načine stvaranja funkcija i kako ih koristiti.

Deklaracije funkcija: jednostavan način

Jedan od načina na koji možete stvoriti funkcije u JavaScriptu je kroz deklaracije funkcija. Deklaracija funkcije je funkcija u JavaScriptu koja slijedi donju sintaksu.

funkcijanaziv funkcije(parametri) {
// kod ide ovdje...
povratak"Ovo je deklaracija funkcije";
}

Komponente gornjeg bloka koda uključuju:

  • The funkcija ključna riječ: Ova ključna riječ deklarira funkciju.
  • naziv funkcije: Ovo je naziv funkcije. U praksi bi trebao biti što je moguće opisniji i smisleniji, pokazujući što funkcija radi.
  • parametri: Ovo predstavlja parametre funkcije. Parametri su izborni popis varijabli koje možete proslijediti funkciji kada je pozovete.
    instagram viewer
  • Tijelo funkcije: ovo sadrži kod koji će funkcija pokrenuti kada je pozovete. Okružen je vitičastim zagradama {} i može sadržavati bilo koji valjani JavaScript kod.
  • The povratak izjava: Ova izjava zaustavlja izvršenje funkcije i vraća navedenu vrijednost. U gornjem slučaju, pozivanje funkcije bi vratilo niz "Ovo je deklaracija funkcije".

Na primjer, deklaracija funkcije u nastavku uzima tri broja kao parametre i vraća njihov zbroj.

funkcijazbrojiTriBroja(a, b, c) {
povratak a + b + c;
}

Da biste pozvali deklaraciju funkcije u JavaScriptu, napišite naziv funkcije iza kojeg slijedi niz zagrada (). Ako funkcija uzima neke parametre, proslijedite ih kao argumente unutar zagrada.

Na primjer:

dodajTriBroja(1, 2, 3) // 6

Gornji blok koda poziva dodatiTriBroja funkcije i prosljeđuje 1, 2 i 3 kao argumente funkciji. Ako pokrenete ovaj kod, on će vratiti vrijednost 6.

JavaScript diže deklaracije funkcija, što znači da ih možete pozvati prije nego što ih definirate.

Na primjer:

isHoisted(); // Funkcija je podignuta
funkcijaisHoisted() {
konzola.log("Funkcija je podignuta");
povratakpravi;
}

Kao što je prikazano u gornjem bloku koda, poziv isHoisted prije definiranja ne bi izbacilo pogrešku.

Funkcijski izrazi: Funkcije kao vrijednosti

U JavaScriptu možete definirati funkciju kao izraz. Zatim možete dodijeliti vrijednost funkcije varijabli ili je koristiti kao argument drugoj funkciji.

Također su poznate kao anonimne funkcije budući da nemaju imena i možete ih pozvati samo iz varijable kojoj ste ih dodijelili.

Ispod je sintaksa za izraz funkcije:

konst naziv funkcije = funkcija () {
povratak"Izraz funkcije";
};

Da biste pozvali izraz funkcije u JavaScriptu, napišite naziv varijable koji ste dodijelili funkciji nakon kojeg slijedi skup zagrada (). Ako funkcija uzima neke parametre, proslijedite ih kao argumente unutar zagrada.

Na primjer:

naziv funkcije(); // Izraz funkcije

Funkcijski izrazi korisni su pri stvaranju funkcija koje se izvode u drugim funkcijama. Tipični primjeri uključuju rukovatelje događajima i njihove povratne pozive.

Na primjer:

button.addEventListener("klik", funkcija (događaj) {
konzola.log("Kliknuli ste na gumb!");
});

Gornji primjer koristi izraz funkcije koji uzima događaj argument kao povratni poziv na addEventListener funkcija. Ne morate izričito pozivati ​​funkciju kada koristite izraz funkcije kao povratni poziv. Automatski ga poziva roditeljska funkcija.

U gornjem slučaju, kada slušatelj događaja primi a klik događaj, poziva funkciju povratnog poziva i prosljeđuje događaj objekt kao argument.

Za razliku od deklaracija funkcija, izrazi funkcija nisu podignuti, tako da ih ne možete pozvati prije nego što ih definirate. Pokušaj pristupa funkcijskom izrazu prije nego što ga definirate rezultirat će a ReferenceError.

Na primjer:

isHoisted(); // ReferenceError: Nije moguće pristupiti 'isHoisted' prije inicijalizacije
konst isHoisted = funkcija () {
konzola.log("Funkcija je podignuta");
};

Funkcije strelica: kompaktno i ograničeno

ES6 je uveo stenografiju za pisanje anonimnih funkcija u JavaScriptu pod nazivom funkcije strelica. Imaju konciznu sintaksu koja može učiniti vaš kod čitljivijim, posebno kada se radi o kratkim funkcijama u jednom retku.

Za razliku od drugih metoda stvaranja funkcija, funkcije strelica ne zahtijevaju funkcija ključna riječ. Izraz funkcije strelice sastoji se od tri dijela:

  • Par zagrada (()) koji sadrži parametre. Možete izostaviti zagrade ako funkcija ima samo jedan parametar.
  • Strijela (=>), koji se sastoji od znaka jednakosti (=) i znak veće od (>).
  • Par vitičastih zagrada koje sadrže tijelo funkcije. Možete izostaviti vitičaste zagrade ako se funkcija sastoji od jednog izraza.

Na primjer:

// Jedan parametar, implicitni povrat
konst naziv funkcije = parametar =>konzola.log("Funkcija strelice jednog parametra")
// Više parametara, eksplicitan povrat
konst naziv funkcije = (parametar_1, parametar_2) => {
povratak"Funkcija strelice s više parametara"
};

Kada izostavite vitičastu zagradu, funkcija strelice implicitno vraća jedan izraz, tako da nema potrebe za povratak ključna riječ. S druge strane, ako ne izostavite vitičastu zagradu, morate eksplicitno vratiti vrijednost koristeći povratak ključna riječ.

Funkcije strelica također se razlikuju ovaj obvezujući u usporedbi s redovnim funkcijama. U redovitim funkcijama vrijednost ovaj ovisi o tome kako pozivate funkciju. U funkciji strelice, ovaj uvijek je vezan za ovaj vrijednost okolnog opsega.

Na primjer:

konst foo = {
 Ime: "Dave",
 pozdraviti: funkcija () {
 setTimeout(() => {
konzola.log(`Zdravo, moje ime je ${ovaj.Ime}`);
 }, 1000);
 },
};
foo.greet(); // Zapisuje "Zdravo, moje ime je Dave" nakon 1 sekunde

U gornjem primjeru, funkcija strelice unutar pozdraviti metoda ima pristup ovo.ime, iako je setTimeout funkcija to poziva. Normalna funkcija bi imala svoje ovaj vezan za globalni objekt.

Kao što naziv implicira, funkcija koja se odmah poziva (IIFE) je funkcija koja se pokreće čim se definira.

Ovo je struktura IIFE-a:

(funkcija () {
// kodirajte ovdje
})();
(() => {
// kodirajte ovdje
})();
(funkcija (parametar_1, parametar_2) {
konzola.log (param_1 * param_2);
})(2, 3);

IIFE se sastoji od funkcijskog izraza umotanog unutar para zagrada. Pratite ga s parom zagrada izvan ograđenog prostora za pozivanje funkcije.

Možete koristiti IIFE za stvaranje opsega, skrivanje detalja implementacije i dijeljenje podataka između više skripti. Nekada su se koristili kao sustav modula u JavaScriptu.

Stvaranje funkcije na mnogo različitih načina

Presudno je razumjeti kako stvoriti funkcije u JavaScriptu. Ovo vrijedi za osnovnu funkciju koja provodi jednostavno računanje ili sofisticiranu funkciju koja je u interakciji s drugim dijelovima vašeg koda.

Možete upotrijebiti gore navedene tehnike za izradu funkcija u JavaScriptu te strukturiranje i organiziranje koda. Odaberite pristup koji najbolje odgovara vašim zahtjevima, jer svaki ima različite prednosti i primjene.