|
|
1 month ago | |
|---|---|---|
| .. | ||
| README.md | 1 month ago | |
| assignment.md | 4 months ago | |
README.md
Osnove JavaScripta: Metode i funkcije
Sketchnote autorice Tomomi Imura
journey
title Vaša avantura JavaScript funkcija
section Osnove
Function Syntax: 5: You
Pozivanje funkcija: 4: You
Parametri i argumenti: 5: You
section Napredni koncepti
Povratne vrijednosti: 4: You
Zadani parametri: 5: You
Sastavljanje funkcija: 4: You
section Moderni JavaScript
Streličaste funkcije: 5: You
Anonimne funkcije: 4: You
Funkcije višeg reda: 5: You
Pred-predavanje kviz
Pisanje istog koda iznova jedna je od najčešćih frustracija u programiranju. Funkcije rješavaju taj problem dopuštajući vam da upakirate kod u višekratno uporabljive blokove. Zamislite funkcije kao standardizirane dijelove koji su revolucionalizirali Henry Fordovu montažnu liniju – jednom kad napravite pouzdani komad, možete ga koristiti gdje god je potrebno bez ponovnog izgradnje od nule.
Funkcije vam omogućuju da grupirate dijelove koda kako biste ih mogli ponovno koristiti kroz svoj program. Umjesto da svaki put kopirate i lijepite istu logiku, možete jednom stvoriti funkciju i pozvati je kad god vam zatreba. Ovakav pristup održava vaš kod urednim i znatno olakšava ažuriranja.
U ovom ćemo se satu naučiti kako kreirati vlastite funkcije, kako im predavati informacije i kako dobiti korisne rezultate natrag. Otkrit ćete razliku između funkcija i metoda, naučiti moderne sintakse i vidjeti kako funkcije mogu raditi s drugim funkcijama. Izgradit ćemo ove koncepte korak po korak.
🎥 Kliknite na gornju sliku za video o metodama i funkcijama.
Ovaj lekciju možete pohađati na Microsoft Learn!
mindmap
root((JavaScript Funkcije))
Osnovni Pojmovi
Deklaracija
Tradicionalna sintaksa
Sintaksa strelične funkcije
Pozivanje
Korištenje zagrada
Zagrade obavezne
Parametri
Ulazne Vrijednosti
Više parametara
Zadane vrijednosti
Argumenti
Proslijeđene vrijednosti
Mogu biti bilo koja vrsta
Povratne Vrijednosti
Izlazni Podaci
return naredba
Izlaz iz funkcije
Korištenje Rezultata
Spremi u varijable
Lančane funkcije
Napredni Obrasci
Višeg Nivoa
Funkcije kao parametri
Povratne funkcije
Anonimne
Nije potrebno ime
Definicija u liniji
Funkcije
Funkcija je samostalni blok koda koji izvršava određeni zadatak. Ona enkapsulira logiku koju možete pokrenuti kad god zatrebate.
Umjesto da pišete isti kod više puta kroz program, možete ga upakirati u funkciju i pozvati tu funkciju kad vam zatreba. Ovaj pristup održava vaš kod čistim i znatno olakšava ažuriranja. Zamislite izazov održavanja ako trebate promijeniti logiku raspršenu na 20 različitih mjesta u vašem kodnom bazenu.
Važno je imenovati vaše funkcije opisno. Dobro imenovana funkcija jasno komunicira svoju svrhu – kad vidite cancelTimer(), odmah shvaćate što radi, baš kao što jasno označeno dugme govori točno što će se dogoditi kad ga kliknete.
Kreiranje i pozivanje funkcije
Pogledajmo kako stvoriti funkciju. Sintaksa slijedi dosljedan obrazac:
function nameOfFunction() { // definicija funkcije
// definicija/tijelo funkcije
}
Raspakirajmo ovo:
- Ključna riječ
functiongovori JavaScriptu "Hej, stvaram funkciju!" nameOfFunctionje mjesto gdje funkciji dajete opisno ime- Zagrade
()su mjesto gdje možete dodati parametre (o tome uskoro) - Vitičaste zagrade
{}sadrže stvarni kod koji se izvršava kada pozovete funkciju
Napravimo jednostavnu funkciju pozdrava da to vidimo u praksi:
function displayGreeting() {
console.log('Hello, world!');
}
Ova funkcija ispisuje "Hello, world!" u konzolu. Nakon što ju definirate, možete je koristiti onoliko puta koliko vam treba.
Da biste izvršili (ili "pozvali") funkciju, napišite njeno ime praćeno zagradama. JavaScript vam dopušta definirati funkciju prije ili poslije njezinog poziva – JavaScriptov engine će se pobrinuti za redoslijed izvršenja.
// pozivanje naše funkcije
displayGreeting();
Kad pokrenete ovaj redak, izvršava se sav kod unutar vaše funkcije displayGreeting, prikazujući "Hello, world!" u konzoli vašeg preglednika. Ovu funkciju možete pozivati više puta.
🧠 Provjera osnova funkcija: Izgradnja prvih funkcija
Pogledajmo kako stojite s osnovama funkcija:
- Možete li objasniti zašto koristimo vitičaste zagrade
{}u definicijama funkcija? - Što se događa ako napišete
displayGreetingbez zagrada? - Zašto biste željeli pozvati istu funkciju više puta?
flowchart TD
A["✏️ Definiraj funkciju"] --> B["📦 Pakiraj kod"]
B --> C["🏷️ Daj mu ime"]
C --> D["📞 Pozovi kad je potrebno"]
D --> E["🔄 Ponovno koristi bilo gdje"]
F["💡 Prednosti"] --> F1["Nema ponavljanja koda"]
F --> F2["Lako održavanje"]
F --> F3["Jasna organizacija"]
F --> F4["Jednostavnije testiranje"]
style A fill:#e3f2fd
style E fill:#e8f5e8
style F fill:#fff3e0
Napomena: Tijekom ovih lekcija koristili ste metode.
console.log()je metoda – zapravo funkcija koja pripada objektuconsole. Ključna razlika je u tome što su metode prikačene na objekte, dok funkcije stoje samostalno. Mnogi developeri ove termine koriste naizmjenično u svakodnevnom govoru.
Najbolje prakse za funkcije
Evo nekoliko savjeta kako napisati odlične funkcije:
- Dajte funkcijama jasna i opisna imena – vaš budući ja će vam biti zahvalan!
- Koristite camelCase za višerječena imena (npr.
calculateTotalumjestocalculate_total) - Neka svaka funkcija bude fokusirana na jedan zadatak koji radi dobro
Predavanje informacija funkciji
Naša funkcija displayGreeting je ograničena – može samo prikazati "Hello, world!" svima. Parametri nam omogućavaju da funkcije učinimo fleksibilnijima i korisnijima.
Parametri djeluju kao rezervirana mjesta u koje možete ubaciti različite vrijednosti svaki put kad koristite funkciju. Na taj način ista funkcija može raditi s različitim informacijama pri svakom pozivu.
Parametre navodite unutar zagrada kad definirate funkciju, odvajajući ih zarezima:
function name(param, param2, param3) {
}
Svaki parametar djeluje kao rezervirano mjesto – kad netko pozove vašu funkciju, on/ona predaje stvarne vrijednosti koje se stavljaju u ta mjesta.
Ažurirajmo našu funkciju pozdrava da prihvati ime:
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
Primijetite kako koristimo znakove za navodnike unatrag (`) i ${} za umetanje imena direktno u našu poruku – ovo se zove predložak stringa i vrlo je zgodan način za sastavljanje stringova s varijablama.
Sad kad pozovemo funkciju, možemo predati bilo koje ime:
displayGreeting('Christopher');
// prikazuje "Hello, Christopher!" prilikom pokretanja
JavaScript uzima string 'Christopher', dodjeljuje ga parametru name i stvara personaliziranu poruku "Hello, Christopher!"
flowchart LR
A["🎯 Poziv funkcije"] --> B["📥 Parametri"]
B --> C["⚙️ Tijelo funkcije"]
C --> D["📤 Rezultat"]
A1["displayGreeting('Alice')"] --> A
B1["ime = 'Alice'"] --> B
C1["Predložak literala\n\`Bok, \${ime}!\`"] --> C
D1["'Bok, Alice!'"] --> D
E["🔄 Tipovi parametara"] --> E1["Nizovi"]
E --> E2["Brojevi"]
E --> E3["Booleani"]
E --> E4["Objekti"]
E --> E5["Funkcije"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#f3e5f5
Zadane vrijednosti
Što ako želimo neke parametre učiniti opcionalnima? Evo koristi zadanih vrijednosti!
Recimo da želimo omogućiti korisnicima da prilagode pozdravnu riječ, ali ako je ne navedu, koristit ćemo "Hello" kao zadanu vrijednost. Zadne vrijednosti postavljate koristeći znak jednakosti, baš kao kod postavljanja varijable:
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
Ovdje je name i dalje obavezan, ali salutation ima rezervnu vrijednost 'Hello' ako netko ne navede drugačiji pozdrav.
Sada možemo pozvati ovu funkciju na dva različita načina:
displayGreeting('Christopher');
// prikazuje "Zdravo, Christopher"
displayGreeting('Christopher', 'Hi');
// prikazuje "Bok, Christopher"
U prvom pozivu JavaScript koristi zadano "Hello" jer nismo naveli pozdrav. U drugom pozivu koristi naš prilagođeni "Hi". Ova fleksibilnost čini funkcije prilagodljivima različitim situacijama.
🎛️ Provjera razumijevanja parametara: Čineći funkcije fleksibilnima
Testirajte svoje razumijevanje parametara:
- Koja je razlika između parametra i argumenta?
- Zašto su zadane vrijednosti korisne u stvarnom programiranju?
- Možete li predvidjeti što se događa ako proslijedite više argumenata nego parametara?
stateDiagram-v2
[*] --> NoParams: funkcija greet() {}
[*] --> WithParams: funkcija greet(name) {}
[*] --> WithDefaults: funkcija greet(name, greeting='Bok') {}
NoParams --> Static: Isti ishod uvijek
WithParams --> Dynamic: Mijenja se s unosom
WithDefaults --> Flexible: Opcionalna prilagodba
Static --> [*]
Dynamic --> [*]
Flexible --> [*]
note right of WithDefaults
Najfleksibilniji pristup
Unazad kompatibilan
end note
Savjet za profesionalce: Zadani parametri čine vaše funkcije pristupačnijima. Korisnici mogu brzo početi s razumijevanjem zadanim vrijednostima, ali ih i dalje prilagoditi po potrebi!
Povratne vrijednosti
Dosad su naše funkcije samo ispisivale poruke u konzolu, ali što ako želite da funkcija nešto izračuna i vrati rezultat?
Tu na scenu stupaju povratne vrijednosti. Umjesto da samo nešto prikaže, funkcija može vratiti vrijednost koju možete spremiti u varijablu ili koristiti u drugim dijelovima koda.
Da biste poslali vrijednost natrag, koristite ključnu riječ return praćenu vrijednošću koju želite vratiti:
return myVariable;
Evo važne stvari: kad funkcija dosegne return naredbu, odmah prestaje s radom i šalje tu vrijednost natrag onome tko ju je pozvao.
Promijenimo našu funkciju pozdrava da vraća poruku umjesto da je ispisuje:
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
Sad ta funkcija umjesto ispisa poruke stvara poruku i vraća ju nama.
Da bismo koristili vraćenu vrijednost, možemo ju spremiti u varijablu poput bilo koje druge vrijednosti:
const greetingMessage = createGreetingMessage('Christopher');
Sada greetingMessage sadrži "Hello, Christopher" i možemo je koristiti bilo gdje u kodu – prikazati na web stranici, uključiti u email ili predati drugoj funkciji.
flowchart TD
A["🔧 Obrada funkcije"] --> B{"izjava o vraćanju?"}
B -->|Da| C["📤 Povratna vrijednost"]
B -->|Ne| D["📭 Vraćanje undefined"]
C --> E["💾 Spremi u varijablu"]
C --> F["🔗 Koristi u izrazu"]
C --> G["📞 Proslijedi funkciji"]
D --> H["⚠️ Obično nije korisno"]
I["📋 Upotreba povratne vrijednosti"] --> I1["Izračunaj rezultate"]
I --> I2["Validiraj unos"]
I --> I3["Transformiraj podatke"]
I --> I4["Kreiraj objekte"]
style C fill:#e8f5e8
style D fill:#ffebee
style I fill:#e3f2fd
🔄 Provjera povratnih vrijednosti: Dobivanje rezultata natrag
Procijenite svoje razumijevanje povratnih vrijednosti:
- Što se događa s kodom nakon
returnnaredbe u funkciji? - Zašto je povrat vrijednosti često bolji od ispisivanja u konzolu?
- Može li funkcija vratiti različite tipove vrijednosti (string, broj, boolean)?
pie title "Česti tipovi vrijednosti povrata"
"Nizovi" : 30
"Brojevi" : 25
"Objekti" : 20
"Booleovi" : 15
"Nizovi (Arrays)" : 10
Ključni uvid: Funkcije koje vraćaju vrijednosti su svestranije jer pozivatelj odlučuje što će s rezultatom napraviti. To vaš kod čini modularnijim i ponovo upotrebljivim!
Funkcije kao parametri funkcijama
Funkcije se mogu predavati kao parametri drugim funkcijama. Iako ovaj koncept može djelovati složeno na početku, to je moćna značajka koja omogućava fleksibilne programske obrasce.
Ovaj uzorak je vrlo čest kad želite reći "kada se nešto dogodi, napravi ovo drugo." Na primjer, "kada tajmer završi, pokreni ovaj kod" ili "kada korisnik klikne gumb, pozovi ovu funkciju."
Pogledajmo setTimeout, što je ugrađena funkcija koja čeka određeno vrijeme, a zatim izvršava neki kod. Moramo joj reći koji kod pokrenuti – savršen slučaj za predavanje funkcije!
Isprobajte ovaj kod – nakon 3 sekunde vidjet ćete poruku:
function displayDone() {
console.log('3 seconds has elapsed');
}
// vrijednost tajmera je u milisekundama
setTimeout(displayDone, 3000);
Primijetite kako predajemo displayDone (bez zagrada) funkciji setTimeout. Mi ne pozivamo funkciju sami – predajemo ju setTimeout i kažemo "pozovi ovo za 3 sekunde."
Anonimne funkcije
Ponekad trebate funkciju za samo jednu stvar i ne želite joj dati ime. Razmislite – ako funkciju koristite samo jednom, zašto nepotrebno zatrpavati kod imenom?
JavaScript vam omogućuje stvaranje anonimnih funkcija – funkcije bez imena koje možete definirati točno tamo gdje ih trebate.
Evo kako možemo prepisati naš primjer s tajmerom koristeći anonimnu funkciju:
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
Time se postiže isti rezultat, ali funkcija je definirana direktno unutar poziva setTimeout, uklanjajući potrebu za zasebnom deklaracijom funkcije.
Funkcije s "debela strelica"
Moderni JavaScript ima još kraći način pisanja funkcija zvane arrow functions (funkcije sa strelicom). Koriste => (izgleda kao strelica – shvatili ste?) i vrlo su popularne kod developera.
Funkcije sa strelicom omogućuju preskakanje ključne riječi function i pisanje sažetijeg koda.
Evo našeg primjera s tajmerom koristeći funkciju sa strelicom:
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
Prazne zagrade () su mjesto za parametre (ovdje prazne), zatim dolazi strelica =>, i na kraju tijelo funkcije u vitičastim zagradama. Ovo pruža istu funkcionalnost s konciznijom sintaksom.
flowchart LR
A["📝 Stilovi funkcija"] --> B["Tradicionalno"]
A --> C["Arrow"]
A --> D["Anonimno"]
B --> B1["function name() {}"]
B --> B2["Hoistano"]
B --> B3["Imenovano"]
C --> C1["const name = () => {}"]
C --> C2["Kratka sintaksa"]
C --> C3["Moderan stil"]
D --> D1["function() {}"]
D --> D2["Bez imena"]
D --> D3["Jednokratna upotreba"]
E["⏰ Kada koristiti"] --> E1["Tradicionalno: Ponovno upotrebljive funkcije"]
E --> E2["Arrow: Kratki callbackovi"]
E --> E3["Anonimno: Obraditelji događaja"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
Kada koristiti koju strategiju
Kada biste trebali koristiti koji pristup? Praktično pravilo je: ako ćete funkciju koristiti više puta, dajte joj ime i definirajte je odvojeno. Ako je za specifičnu, jednokratnu upotrebu, razmislite o anonimnoj funkciji. Oba pristupa, strelične funkcije i tradicionalna sintaksa, su valjani izbori, iako su strelične funkcije češće u modernim JavaScript kodnim bazama.
🎨 Provjera stilova funkcija: Odabir pravog sintaksisa
Testirajte svoje razumijevanje sintakse:
- Kada biste radije koristili strelične funkcije umjesto tradicionalne sintakse funkcija?
- Koja je glavna prednost anonimnih funkcija?
- Možete li zamisliti situaciju u kojoj je imenovana funkcija bolja od anonimne?
quadrantChart
title Matrica Odluke Izbora Funkcije
x-axis Jednostavno --> Složeno
y-axis Jednokratna upotreba --> Višekratna upotreba
quadrant-1 Funkcije Strelice
quadrant-2 Imenovane Funkcije
quadrant-3 Anonimne Funkcije
quadrant-4 Tradicionalne Funkcije
Event Handlers: [0.3, 0.2]
Utility Functions: [0.7, 0.8]
Callbacks: [0.2, 0.3]
Class Methods: [0.8, 0.7]
Mathematical Operations: [0.4, 0.6]
Moderan trend: Strelične funkcije postaju zadani izbor za mnoge developere zbog sažetosti sintakse, ali tradicionalne funkcije još uvijek imaju svoje mjesto!
🚀 Izazov
Možete li jednim rečenicom izreći razliku između funkcija i metoda? Probajte!
GitHub Copilot Agent Izazov 🚀
Koristite Agent način rada za dovršetak sljedećeg izazova:
Opis: Napravite pomoćnu biblioteku matematičkih funkcija koja demonstrira različite koncepte funkcija obrađene u ovoj lekciji, uključujući parametre, zadane vrijednosti, povratne vrijednosti i strelične funkcije.
Zadatak: Kreirajte JavaScript datoteku pod nazivom mathUtils.js koja sadrži sljedeće funkcije:
- Funkciju
addkoja prima dva parametra i vraća njihov zbroj - Funkciju
multiplysa zadanim vrijednostima parametara (drugi parametar zadano 1) - Streličnu funkciju
squarekoja prima broj i vraća njegov kvadrat - Funkciju
calculatekoja prima drugu funkciju kao parametar i dva broja te primjenjuje tu funkciju na ta dva broja - Prikažite pozivanje svake funkcije s odgovarajućim testnim primjerima
Više o agent načinu rada saznajte ovdje.
Post-predavanje kviz
Pregled i samostalno učenje
Vrijedi pročitati malo više o streličnim funkcijama jer se sve više koriste u kodnim bazama. Prakticirajte pisanje funkcije, a zatim je prepišite koristeći ovaj sintaksis.
Zadatak
🧰 Vaš JavaScript alatni set funkcija - Sažetak
graph TD
A["🎯 JavaScript Funkcije"] --> B["📋 Deklaracija funkcije"]
A --> C["📥 Parametri"]
A --> D["📤 Vraćene vrijednosti"]
A --> E["🎨 Moderna sintaksa"]
B --> B1["function name() {}"]
B --> B2["Deskriptivno imenovanje"]
B --> B3["Ponovno iskoristivi blokovi koda"]
C --> C1["Ulazni podaci"]
C --> C2["Zadane vrijednosti"]
C --> C3["Više parametara"]
D --> D1["izjava return"]
D --> D2["Izlaz iz funkcije"]
D --> D3["Vraćanje podataka natrag"]
E --> E1["Arrow funkcije: () =>"]
E --> E2["Anonimne funkcije"]
E --> E3["Funkcije višeg reda"]
F["⚡ Ključne prednosti"] --> F1["Ponovna iskoristivost koda"]
F --> F2["Bolja organizacija"]
F --> F3["Lakše testiranje"]
F --> F4["Modularni dizajn"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
🚀 Vaš vremenski okvir za savladavanje JavaScript funkcija
⚡ Što možete napraviti u sljedećih 5 minuta
- Napišite jednostavnu funkciju koja vraća vaš omiljeni broj
- Kreirajte funkciju s dva parametra koja ih zbraja zajedno
- Pokušaj pretvoriti tradicionalnu funkciju u sintaksu streličaste funkcije
- Vježbaj izazov: objasni razliku između funkcija i metoda
🎯 Što možeš postići u ovom satu
- Dovrši kviz nakon lekcije i pregledaj zbunjujuće koncepte
- Izgradi biblioteku matematičkih utiliteta iz GitHub Copilot izazova
- Kreiraj funkciju koja koristi drugu funkciju kao parametar
- Vježbaj pisanje funkcija s zadanim parametrima
- Eksperimentiraj s predlošcima nizova u vrijednostima koje funkcije vraćaju
📅 Tvoj tjedan za usavršavanje funkcija
- Dovrši zadatak "Zabava s funkcijama" s kreativnošću
- Refaktoriraj neke ponavljajuće dijelove koda koje si napisao u višekratno upotrebljive funkcije
- Izgradi mali kalkulator koristeći samo funkcije (bez globalnih varijabli)
- Vježbaj streličaste funkcije s metodama nizova poput
map()ifilter() - Kreiraj zbirku utilitarnih funkcija za uobičajene zadatke
- Prouči funkcije višeg reda i koncepte funkcionalnog programiranja
🌟 Tvoja mjesečna transformacija
- Ovladavanje naprednim konceptima funkcija poput zatvaranja i opsega
- Izgradi projekt koji intenzivno koristi kompoziciju funkcija
- Sudjeluj u open source projektima poboljšavajući dokumentaciju funkcija
- Poduči nekoga drugoga o funkcijama i različitim stilovima sintakse
- Istraži paradigme funkcionalnog programiranja u JavaScriptu
- Kreiraj osobnu biblioteku višekratno upotrebljivih funkcija za buduće projekte
🏆 Zaključna provjera tvog majstorstva funkcija
Proslavi svoje ovladavanje funkcijama:
- Koja je najučinkovitija funkcija koju si do sada stvorio?
- Kako je učenje o funkcijama promijenilo tvoj pogled na organizaciju koda?
- Koju sintaksu funkcija preferiraš i zašto?
- Koji stvarni problem bi riješio pisanjem funkcije?
journey
title Evolucija Vašeg Povjerenja u Funkcije
section Danas
Zbunjeni Sintaksom: 3: You
Razumijevanje Osnova: 4: You
Pisanje Jednostavnih Funkcija: 5: You
section Ovaj Tjedan
Korištenje Parametara: 4: You
Vraćanje Vrijednosti: 5: You
Moderna Sintaksa: 5: You
section Sljedeći Mjesec
Kompozicija Funkcija: 5: You
Napredni Obrasci: 5: You
Poučavanje Druge: 5: You
🎉 Ovladali ste jednim od najsnažnijih koncepata programiranja! Funkcije su gradivni blokovi većih programa. Svaka aplikacija koju ikada napraviš koristit će funkcije za organizaciju, ponovnu upotrebu i strukturiranje koda. Sada razumiješ kako zapakirati logiku u višekratno upotrebljive komponente, čineći te učinkovitijim i uspješnijim programerom. Dobrodošao u svijet modularnog programiranja! 🚀
Izjava o odricanju od odgovornosti:
Ovaj dokument je preveden korištenjem AI usluge za prevođenje Co-op Translator. Iako nastojimo postići točnost, molimo imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja proizašla iz korištenja ovog prijevoda.

