13 KiB

Raw Blame History Unescape Escape

Osnove JavaScripta: Metode in Funkcije

Sketchnote avtorja Tomomi Imura

Predhodni kviz

Ponavljanje iste kode je ena najpogostejših frustracij pri programiranju. Funkcije rešujejo ta problem, saj omogočajo pakiranje kode v ponovno uporabne bloke. Pomislite na funkcije kot na standardizirane dele, ki so revolucionirali proizvodno linijo Henryja Forda – ko enkrat ustvarite zanesljivo komponento, jo lahko uporabite kjerkoli, ne da bi jo morali znova sestavljati.

Funkcije omogočajo združevanje delov kode, da jih lahko ponovno uporabite v celotnem programu. Namesto kopiranja in lepljenja iste logike povsod, lahko funkcijo ustvarite enkrat in jo pokličete, kadar koli je to potrebno. Ta pristop ohranja vašo kodo organizirano in olajša posodobitve.

V tej lekciji se boste naučili, kako ustvariti svoje funkcije, jim posredovati informacije in pridobiti koristne rezultate. Spoznali boste razliko med funkcijami in metodami, se naučili sodobnih sintaktičnih pristopov ter videli, kako lahko funkcije delujejo z drugimi funkcijami. Te koncepte bomo gradili korak za korakom.

🎥 Kliknite zgornjo sliko za video o metodah in funkcijah.

To lekcijo lahko opravite na Microsoft Learn!

Funkcije

Funkcija je samostojen blok kode, ki opravlja določeno nalogo. Vsebuje logiko, ki jo lahko izvedete, kadar koli je to potrebno.

Namesto da bi isto kodo pisali večkrat v celotnem programu, jo lahko zapakirate v funkcijo in jo pokličete, kadar koli jo potrebujete. Ta pristop ohranja vašo kodo čisto in olajša posodobitve. Predstavljajte si izziv vzdrževanja, če bi morali spremeniti logiko, ki je razpršena na 20 različnih mestih v vaši kodi.

Pomembno je, da svojim funkcijam dodelite opisna imena. Dobro poimenovana funkcija jasno sporoča svoj namen – ko vidite cancelTimer(), takoj razumete, kaj počne, tako kot jasno označen gumb pove, kaj se bo zgodilo, ko ga kliknete.

Ustvarjanje in klicanje funkcije

Poglejmo, kako ustvariti funkcijo. Sintaksa sledi doslednemu vzorcu:

function nameOfFunction() { // function definition
 // function definition/body
}

Razčlenimo to:

Ključna beseda function pove JavaScriptu: "Hej, ustvarjam funkcijo!"
nameOfFunction je mesto, kjer svoji funkciji dodelite opisno ime
Oklepaji () so mesto, kjer lahko dodate parametre (k temu bomo prišli kmalu)
Zavite oklepaje {} vsebujejo dejansko kodo, ki se zažene, ko pokličete funkcijo

Ustvarimo preprosto funkcijo za pozdrav, da vidimo, kako to deluje:

function displayGreeting() {
  console.log('Hello, world!');
}

Ta funkcija izpiše "Hello, world!" v konzolo. Ko jo enkrat definirate, jo lahko uporabite tolikokrat, kot je potrebno.

Za izvedbo (ali "klicanje") funkcije napišite njeno ime, ki mu sledijo oklepaji. JavaScript vam omogoča, da funkcijo definirate pred ali po njenem klicu – JavaScriptov pogon bo poskrbel za vrstni red izvajanja.

// calling our function
displayGreeting();

Ko zaženete to vrstico, se izvede vsa koda znotraj vaše funkcije displayGreeting, ki prikaže "Hello, world!" v konzoli vašega brskalnika. To funkcijo lahko kličete večkrat.

Opomba: V teh lekcijah ste že uporabljali metode. console.log() je metoda – v bistvu funkcija, ki pripada objektu console. Ključna razlika je v tem, da so metode pritrjene na objekte, medtem ko funkcije stojijo samostojno. Veliko razvijalcev te izraze uporablja izmenično v vsakdanjem pogovoru.

Najboljše prakse za funkcije

Tukaj je nekaj nasvetov, ki vam bodo pomagali pisati odlične funkcije:

Dajte svojim funkcijam jasna, opisna imena – vaša prihodnja različica vam bo hvaležna!
Uporabljajte camelCase za imena z več besedami (na primer calculateTotal namesto calculate_total)
Naj bo vsaka funkcija osredotočena na eno nalogo

Posredovanje informacij funkciji

Naša funkcija displayGreeting je omejena – lahko prikaže le "Hello, world!" za vse. Parametri nam omogočajo, da funkcije naredimo bolj prilagodljive in uporabne.

Parametri delujejo kot mesta, kamor lahko vstavite različne vrednosti vsakič, ko uporabite funkcijo. Na ta način lahko ista funkcija deluje z različnimi informacijami ob vsakem klicu.

Parametre navedete znotraj oklepajev, ko definirate funkcijo, pri čemer ločite več parametrov z vejicami:

function name(param, param2, param3) {

}

Vsak parameter deluje kot mesto – ko nekdo pokliče vašo funkcijo, bo zagotovil dejanske vrednosti, ki se vstavijo na ta mesta.

Posodobimo našo funkcijo za pozdrav, da sprejme ime osebe:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Opazite, kako uporabljamo nazobčane narekovaje (`) in ${} za neposredno vstavljanje imena v naše sporočilo – to se imenuje predloga literala in je resnično priročen način za sestavljanje nizov z vključenimi spremenljivkami.

Zdaj, ko pokličemo funkcijo, lahko posredujemo katero koli ime:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript vzame niz 'Christopher', ga dodeli parametru name in ustvari prilagojeno sporočilo "Hello, Christopher!"

Privzete vrednosti

Kaj pa, če želimo, da so nekateri parametri neobvezni? Tukaj pridejo prav privzete vrednosti!

Recimo, da želimo ljudem omogočiti prilagoditev besede za pozdrav, vendar če je ne določijo, bomo uporabili "Hello" kot privzeto možnost. Privzete vrednosti lahko nastavite z uporabo znaka enačbe, podobno kot pri nastavitvi spremenljivke:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Tukaj je name še vedno obvezen, vendar ima salutation rezervno vrednost 'Hello', če nihče ne zagotovi drugačnega pozdrava.

Zdaj lahko to funkcijo pokličemo na dva različna načina:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Pri prvem klicu JavaScript uporabi privzeti "Hello", saj nismo določili pozdrava. Pri drugem klicu pa uporabi naš prilagojeni "Hi". Ta prilagodljivost omogoča funkcijam, da se prilagodijo različnim scenarijem.

Vrnitev vrednosti

Naše funkcije do zdaj so samo izpisovale sporočila v konzolo, vendar kaj, če želite, da funkcija nekaj izračuna in vam vrne rezultat?

Tukaj pridejo v poštev vrnjene vrednosti. Namesto da bi samo nekaj prikazali, lahko funkcija vrne vrednost, ki jo lahko shranite v spremenljivko ali uporabite v drugih delih kode.

Za pošiljanje vrednosti nazaj uporabite ključno besedo return, ki ji sledi, kar želite vrniti:

return myVariable;

Pomembno je: ko funkcija doseže stavek return, takoj preneha z izvajanjem in pošlje to vrednost nazaj tistemu, ki jo je poklical.

Spremenimo našo funkcijo za pozdrav, da namesto izpisa vrne sporočilo:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Zdaj namesto izpisa pozdrava ta funkcija ustvari sporočilo in nam ga vrne.

Da uporabimo vrnjeno vrednost, jo lahko shranimo v spremenljivko, kot katero koli drugo vrednost:

const greetingMessage = createGreetingMessage('Christopher');

Zdaj greetingMessage vsebuje "Hello, Christopher" in ga lahko uporabimo kjerkoli v naši kodi – za prikaz na spletni strani, vključitev v e-pošto ali posredovanje drugi funkciji.

Funkcije kot parametri za funkcije

Funkcije je mogoče posredovati kot parametre drugim funkcijam. Čeprav se ta koncept sprva morda zdi zapleten, je to močna funkcija, ki omogoča prilagodljive vzorce programiranja.

Ta vzorec je zelo pogost, ko želite reči "ko se nekaj zgodi, naredi to drugo stvar." Na primer, "ko se časovnik konča, zaženi to kodo" ali "ko uporabnik klikne gumb, pokliči to funkcijo."

Poglejmo setTimeout, ki je vgrajena funkcija, ki počaka določeno časovno obdobje in nato zažene neko kodo. Povedati ji moramo, katero kodo naj zažene – popoln primer za posredovanje funkcije!

Preizkusite to kodo – po 3 sekundah boste videli sporočilo:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Opazite, kako posredujemo displayDone (brez oklepajev) funkciji setTimeout. Funkcije ne kličemo sami – predajamo jo setTimeout in rečemo "pokliči to čez 3 sekunde."

Anonimne funkcije

Včasih potrebujete funkcijo samo za eno stvar in ji ne želite dati imena. Pomislite – če funkcijo uporabljate samo enkrat, zakaj bi z dodatnim imenom obremenjevali svojo kodo?

JavaScript vam omogoča ustvarjanje anonimnih funkcij – funkcij brez imen, ki jih lahko definirate tam, kjer jih potrebujete.

Tukaj je, kako lahko prepišemo naš primer časovnika z uporabo anonimne funkcije:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

To doseže enak rezultat, vendar je funkcija definirana neposredno znotraj klica setTimeout, kar odpravlja potrebo po ločeni deklaraciji funkcije.

Funkcije z maščobno puščico

Sodobni JavaScript ima še krajši način pisanja funkcij, imenovan funkcije z maščobno puščico. Uporabljajo => (ki izgleda kot puščica – razumete?) in so zelo priljubljene med razvijalci.

Funkcije z maščobno puščico vam omogočajo, da preskočite ključno besedo function in napišete bolj jedrnato kodo.

Tukaj je naš primer časovnika z uporabo funkcije z maščobno puščico:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

() je mesto, kamor bi šli parametri (v tem primeru prazno), nato sledi puščica =>, in na koncu telo funkcije v zavitih oklepajih. To zagotavlja enako funkcionalnost z bolj jedrnato sintakso.

Kdaj uporabiti katero strategijo

Kdaj uporabiti kateri pristop? Praktično vodilo: če boste funkcijo uporabili večkrat, ji dajte ime in jo definirajte ločeno. Če je namenjena samo eni specifični uporabi, razmislite o anonimni funkciji. Obe, funkcije z maščobno puščico in tradicionalna sintaksa, sta veljavni izbiri, čeprav so funkcije z maščobno puščico pogoste v sodobnih JavaScript kodnih bazah.

🚀 Izziv

Ali lahko v enem stavku razložite razliko med funkcijami in metodami? Poskusite!

GitHub Copilot Agent Izziv 🚀

Uporabite način Agent za dokončanje naslednjega izziva:

Opis: Ustvarite knjižnico pripomočkov za matematične funkcije, ki prikazuje različne koncepte funkcij, obravnavane v tej lekciji, vključno s parametri, privzetimi vrednostmi, vrnjenimi vrednostmi in funkcijami z maščobno puščico.

Navodilo: Ustvarite JavaScript datoteko z imenom mathUtils.js, ki vsebuje naslednje funkcije:

Funkcijo add, ki sprejme dva parametra in vrne njuno vsoto
Funkcijo multiply z privzetimi vrednostmi parametrov (drugi parameter privzeto 1)
Funkcijo z maščobno puščico square, ki sprejme število in vrne njegov kvadrat
Funkcijo calculate, ki sprejme drugo funkcijo kot parameter in dve števili, nato pa uporabi funkcijo na teh številih
Demonstrirajte klicanje vsake funkcije z ustreznimi testnimi primeri

Več o načinu agent si preberite tukaj.

Zaključni kviz

Pregled & Samostojno učenje

Vredno je prebrati več o funkcijah z maščobno puščico, saj se vse pogosteje uporabljajo v kodnih bazah. Vadite pisanje funkcije in nato njeno prepisovanje s to sintakso.

Naloga

Zabava s funkcijami

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje AI Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku naj se šteje za avtoritativni vir. Za ključne informacije je priporočljivo profesionalno človeško prevajanje. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.

13 KiB Raw Blame History Unescape Escape