9.9 KiB

Raw Blame History

JavaScript'i põhialused: meetodid ja funktsioonid

Sketchnote autor: Tomomi Imura

Eelloengu viktoriin

Kui mõtleme koodi kirjutamisele, tahame alati tagada, et meie kood oleks loetav. Kuigi see võib tunduda vastupidine, loetakse koodi palju rohkem kui seda kirjutatakse. Üks arendaja tööriistakasti põhivahenditest, mis aitab tagada hooldatavat koodi, on funktsioon.

🎥 Klõpsa ülaloleval pildil, et vaadata videot meetoditest ja funktsioonidest.

Selle õppetunni leiad Microsoft Learnist!

Funktsioonid

Funktsioon on sisuliselt koodiplokk, mida saame käivitada vastavalt vajadusele. See sobib ideaalselt olukordadesse, kus peame sama ülesannet täitma mitu korda; selle asemel, et loogikat mitmes kohas dubleerida (mis muudaks hilisema uuendamise keeruliseks), saame selle tsentraliseerida ühte kohta ja kutsuda seda üles, kui operatsiooni on vaja teha - funktsioone saab isegi teistest funktsioonidest kutsuda!

Samavõrd oluline on funktsiooni nime andmine. Kuigi see võib tunduda tühine, pakub nimi kiiret viisi koodilõigu dokumenteerimiseks. Võid mõelda sellele kui nupule pandud sildile. Kui klõpsan nupul, millel on kirjas "Tühista taimer", tean, et see peatab kella käimise.

Funktsiooni loomine ja kutsumine

Funktsiooni süntaks näeb välja järgmine:

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

Kui tahaksin luua funktsiooni tervituse kuvamiseks, võiks see välja näha nii:

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

Kui tahame oma funktsiooni kutsuda (või käivitada), kasutame funktsiooni nime, millele järgneb (). Tasub märkida, et meie funktsioon võib olla defineeritud enne või pärast selle kutsumist; JavaScript'i kompilaator leiab selle üles.

// calling our function
displayGreeting();

NOTE: On olemas eriline funktsiooni tüüp, mida nimetatakse meetodiks, mida oled juba kasutanud! Tegelikult nägime seda oma demos, kui kasutasime console.log. Mis eristab meetodit funktsioonist, on see, et meetod on seotud objektiga (meie näites console), samas kui funktsioon on vaba ja ei kuulu ühegi objekti alla. Paljud arendajad kasutavad neid termineid vaheldumisi.

Funktsiooni parimad tavad

Funktsioonide loomisel tasub meeles pidada mõningaid parimaid tavasid:

Kasuta alati kirjeldavaid nimesid, et teaksid, mida funktsioon teeb
Kasuta camelCase'i sõnade ühendamiseks
Hoia oma funktsioonid keskendunud konkreetsele ülesandele

Informatsiooni edastamine funktsioonile

Funktsiooni muutmiseks paindlikumaks tahad sageli sellele informatsiooni edastada. Kui vaatame meie ülaltoodud displayGreeting näidet, kuvab see ainult Hello, world!. See pole just kõige kasulikum funktsioon, mida võiks luua. Kui tahame seda veidi paindlikumaks muuta, näiteks võimaldada kellelgi määrata tervitatava inimese nime, saame lisada parameetri. Parameeter (mõnikord nimetatakse seda ka argumendiks) on lisainformatsioon, mis saadetakse funktsioonile.

Parameetrid loetletakse definitsiooni osas sulgudes ja eraldatakse komadega, näiteks:

function name(param, param2, param3) {

}

Saame uuendada oma displayGreeting funktsiooni, et see aktsepteeriks nime ja kuvaks selle.

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

Kui tahame oma funktsiooni kutsuda ja parameetri edastada, määrame selle sulgudes.

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

Vaikeväärtused

Saame muuta oma funktsiooni veelgi paindlikumaks, lisades rohkem parameetreid. Aga mis siis, kui me ei taha, et iga väärtus oleks kohustuslik? Jätkates meie tervituse näidet, võiksime jätta nime kohustuslikuks (meil on vaja teada, keda tervitame), kuid tahame võimaldada tervitust ise kohandada. Kui keegi ei soovi seda kohandada, pakume selle asemel vaikeväärtuse. Vaikeväärtuse määramiseks parameetrile seadistame selle samamoodi nagu määrame väärtuse muutujale - parameterName = 'defaultValue'. Täieliku näite nägemiseks:

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

Kui kutsume funktsiooni, saame otsustada, kas tahame salutation jaoks väärtuse määrata.

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

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

Tagastusväärtused

Siiani on meie loodud funktsioon alati väljastanud tulemuse konsoolile. Mõnikord võib see olla täpselt see, mida otsime, eriti kui loome funktsioone, mis kutsuvad teisi teenuseid. Aga mis siis, kui tahan luua abifunktsiooni, mis teeb arvutuse ja tagastab väärtuse, et saaksin seda mujal kasutada?

Saame seda teha, kasutades tagastusväärtust. Tagastusväärtus tagastatakse funktsiooni poolt ja seda saab salvestada muutujasse samamoodi nagu saaksime salvestada literaalväärtuse, näiteks stringi või numbri.

Kui funktsioon midagi tagastab, kasutatakse märksõna return. Märksõna return eeldab väärtust või viidet sellele, mida tagastatakse, näiteks:

return myVariable;

Saaksime luua funktsiooni, mis loob tervitussõnumi ja tagastab väärtuse kutsujale.

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

Funktsiooni kutsumisel salvestame väärtuse muutujasse. See on väga sarnane sellele, kuidas määraksime muutujale staatilise väärtuse (näiteks const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Funktsioonid funktsioonide parameetritena

Kui edened oma programmeerimiskarjääris, kohtad funktsioone, mis aktsepteerivad funktsioone parameetritena. See nutikas trikk on sageli kasutusel, kui me ei tea, millal midagi juhtub või lõppeb, kuid teame, et peame sellele vastuseks operatsiooni tegema.

Näiteks setTimeout, mis alustab taimerit ja käivitab koodi, kui see lõppeb. Peame ütlema, millist koodi tahame käivitada. Tundub ideaalne töö funktsioonile!

Kui käivitad alloleva koodi, näed 3 sekundi pärast sõnumit 3 sekundit on möödunud.

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

Anonüümsed funktsioonid

Vaatame uuesti, mida oleme ehitanud. Loome funktsiooni nimega, mida kasutatakse ainult üks kord. Kui meie rakendus muutub keerukamaks, näeme, et loome palju funktsioone, mida kutsutakse ainult üks kord. See pole ideaalne. Selgub, et me ei pea alati nime andma!

Kui edastame funktsiooni parameetrina, saame vältida selle eelnevat loomist ja selle asemel ehitada selle parameetri osana. Kasutame sama märksõna function, kuid ehitame selle parameetrina.

Kirjutame ülaltoodud koodi ümber, et kasutada anonüümset funktsiooni:

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

Kui käivitad meie uue koodi, märkad, et tulemused on samad. Oleme loonud funktsiooni, kuid ei pidanud sellele nime andma!

Fat arrow funktsioonid

Üks lühend, mis on levinud paljudes programmeerimiskeeltes (sealhulgas JavaScript'is), on võimalus kasutada nn noole või fat arrow funktsiooni. See kasutab spetsiaalset sümbolit =>, mis näeb välja nagu nool - seega nimi! Kasutades =>, saame vahele jätta märksõna function.

Kirjutame oma koodi veel kord ümber, et kasutada fat arrow funktsiooni:

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

Millal kasutada iga strateegiat

Oled nüüd näinud, et meil on kolm viisi funktsiooni parameetrina edastamiseks ja võid mõelda, millal kasutada igaüht. Kui tead, et kasutad funktsiooni rohkem kui üks kord, loo see tavapäraselt. Kui kasutad seda ainult ühes kohas, on üldiselt parim kasutada anonüümset funktsiooni. Kas kasutada fat arrow funktsiooni või traditsioonilist function süntaksit, on sinu otsustada, kuid märkad, et enamik kaasaegseid arendajaid eelistab =>.

🚀 Väljakutse

Kas suudad ühe lausega selgitada funktsioonide ja meetodite erinevust? Proovi järele!

Järelloengu viktoriin

Ülevaade ja iseseisev õppimine

Tasub lugeda veidi rohkem noolefunktsioonide kohta, kuna neid kasutatakse üha enam koodibaasides. Harjuta funktsiooni kirjutamist ja seejärel selle ümberkirjutamist selle süntaksiga.

Ülesanne

Lõbu funktsioonidega

Lahtiütlus:
See dokument on tõlgitud AI tõlketeenuse Co-op Translator abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.

9.9 KiB Raw Blame History