JavaScript funkcijos. 7 dalis JavaScript kursas nuo pradedančiųjų iki pažengusiųjų per 10 tinklaraščio įrašų

Tai yra 7 dalis JavaScript tinklaraščio įrašų serijoje, kuri nuves jus nuo pradedančiojo iki pažengusiojo. Šios serijos pabaigoje jūs žinosite visus pagrindus, kuriuos reikia žinoti, kad pradėtumėte programuoti JavaScript. Be jokių papildomų kalbų, pradėkime septintąjį mokymą.

JavaScript funkcijos – turinys:

1. JavaScript funkcijų tipai
2. Švarios funkcijos JavaScript

Iki šiol mes matėme gana svarbius JavaScript aspektus kartu su kai kuriomis dažniausiai pasitaikančiomis programavimo geriausiomis praktikomis, kurių turėtume laikytis. Šios vadinamosios praktikos egzistuoja ne be priežasties, ir kai mes jas naudojame, jos sutaupys mums daug klaidų ir nusivylimų, su kuriais kitaip susidurtume. Viena iš geriausių praktikų, kurią matėme, buvo laikytis DRY principo, kuris iš esmės sakė: Nekartokite savęs. Vienas iš būdų, kaip mes taikėme šį principą, buvo naudoti ciklus mūsų programoje, konkrečiau “for ciklus”, kurie sutaupė mums daug laiko ir kodo. Šiame mokyme mes pamatysime dar vieną svarbų programavimo elementą, ir jis vadinamas “funkcijomis”.

JavaScript funkcijų tipai

Funkcijos yra labai dažnos programavime, ir tai apima ir JavaScript. Iš tikrųjų, jos yra tokios dažnos, kad kai kurios JavaScript sistemos, tokios kaip React, buvo sukurtos remiantis JavaScript funkcijomis kaip pagrindiniu statybiniu bloku kuriant svetainių priekinę dalį. Ir jie tai padarė ne be priežasties. JavaScript funkcijos suteikia didelį lankstumą, tuo pačiu teikdamos labai prognozuojamą ir modulinį kodą. Ir tai lemia daug aiškesnį kodą su mažiau pasikartojimų ir daug mažiau klaidų. Viena iš pirmųjų dalykų, kuriuos turėtumėte žinoti apie funkcijas, yra tai, kad yra dvi pagrindinės funkcijų rūšys. Jos yra “švarios funkcijos” ir “nešvarios funkcijos”. Kalbant bendrai, mes norėsime naudoti švarias funkcijas, kur galime, kiek įmanoma. Švarios funkcijos suteikia daugybę privalumų, kurie palengvina darbą su jomis, palyginti su nešvariomis funkcijomis. Pirmiausia pažvelkime į švarias JavaScript funkcijas, o tada panagrinėsime ir nešvarias funkcijas.

Švarios funkcijos JavaScript

Švarios funkcijos iš esmės yra funkcijos, kurios laikosi tam tikrų taisyklių. Ir kadangi jos laikosi tų taisyklių, jos yra labai prognozuojamos, lengviau derinamos didesnėje sistemoje, moduliniu būdu, kartu su kitais privalumais.

Švari funkcija gauna tam tikrą įvestį ir grąžina tam tikrą išvestį. Ji tiesiogiai nekeičia įvesties arba nesąveikauja su aplinka jokiu kitu būdu. Tai reiškia, kad ji nesiunčia jums pranešimų, neduoda jums pareiškimo, kol darote ką nors kita, arba nesąveikauja su savo aplinka jokiu kitu būdu.

Taip, kai dirbate su švaria funkcija, žinote, kad nesvarbu, kur vykdote savo kodą ar kada jį vykdote, jei tik duosite tas pačias įvestis, gausite tas pačias išvestis. Pažvelkime į tai su keletu pavyzdžių.

// padvigubinkite pradinį skaičių
function double(num){
    return num * 2;
}

// padvigubinkite pradinį skaičių
function triple(num){
    return num * 3;
}

// pridėkite 100 prie pradinio skaičiaus
function add100(num){
    return num + 100;
}

// pridėkite du skaičius
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// padauginkite du skaičius
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Visos aukščiau pateiktos JavaScript funkcijos yra švarios funkcijos. Atidžiau pažvelgus, galite pastebėti modelį, kurį naudojame kurdami švarias funkcijas. Pirmas žingsnis yra tai, kad mes rašome raktinį žodį “function”, kad pasakytume JavaScript, jog norime apibrėžti funkciją.

Kitas, mes suteikiame funkcijai pavadinimą, pageidautina, kad šis pavadinimas būtų trumpas, tačiau pakankamai aprašomas, kad kas nors, kas ateina, suprastų, ką funkcija daro. Pavyzdžiui, jei mes pridedame 100 prie skaičiaus, galime pavadinti funkciją “add100”, jei mes dvigubiname skaičių, galime pavadinti funkciją “double” ir taip toliau.

Kai mes tinkamai pavadinome funkciją, kitas žingsnis yra suteikti jai tam tikrą įvestį. Mes pateikiame įvestis skliaustuose, o jei turime kelias įvestis, mes jas atskiriame kableliu. Kaip ir padarėme “multiplyTwoNums” funkcijoje. (Taip pat, kaip šalia pastaba, skaičiai dažnai vadinami “nums” trumpai programavime, todėl, kai mes pavadiname funkciją, galime pasinaudoti šiuo bendru žinojimu, kad turėtume trumpus, tačiau aprašomus funkcijų pavadinimus.)

Įvestys, kurias pateikiame funkcijai, taip pat dažnai vadinamos “parametrais”, kai mes kuriame JavaScript funkcijas, mes nusprendžiame, kiek parametrų turės funkcija. Kai nusprendžiame naudoti funkciją, mes pateikiame tuos parametrus su “vertėmis”. Tos vertės, kurias mes pateikiame naudodami funkciją, taip pat dažnai vadinamos “argumentais”. Taigi, kai mes pateikiame įvestį funkcijai, šis procesas taip pat vadinamas “argumentų perdavimu” funkcijai. Pažvelkime į keletą pavyzdžių.

// pirmiausia apibrėžkime funkciją, kuri priima skaičių 
// ir padaugina jį iš 10
function multiplyBy10(num1){
    return num1 * 10;
}

// dabar kvieskime tą funkciją
// išsaugokite rezultatą į konstantą
// ir parodykite rezultatus
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 čia yra parametras.
// mes perdavėme vertę 3 kaip argumentą funkcijai.
// mes išsaugojome funkcijos rezultatus
// į konstantą, pavadintą bigNum.
// mes parodėme konstantą, pavadintą bigNum, vartotojui.

Kaip matėte aukščiau pateiktame kode, net kai norime parodyti ką nors vartotojui, mes laikome funkciją atskirai nuo alert funkcijos. Jei mes norėtume parodyti rezultatus vartotojui funkcijos viduje, tai reikalautų, kad funkcija sąveikautų su kitomis kompiuterio dalimis ir padarytų mūsų funkciją nešvarią. Taigi, kalbant bendrai, mes norime naudoti funkcijas, kad suteiktume joms įvestį ir tikėtumėmės grąžinamo vertės. Kai gauname tą grąžinamą vertę, tada mes galime ją iš tikrųjų parodyti arba atlikti kitas JavaScript funkcijas su ja, priklausomai nuo mūsų poreikių, tačiau esmė yra ta, kad laikyti rezultatų rodymo ir skaičiavimo užduotis atskirai.

Taigi iki šiol mes matėme, kad galime naudoti “function” raktinį žodį, kad pradėtume deklaruoti funkciją, tada tinkamai pavadiname funkciją, tada atidarome ir uždarome skliaustus ir pasakome funkcijai, kokių parametrų jai reikės, tada atidarome skliaustus ir pasakome funkcijai, ką norime, kad ji darytų, kai pasiekiame rezultatą, mes grąžiname tą rezultatą su “return” raktiniu žodžiu. Ir tada uždarome skliaustus. visi šie žingsniai buvo būtini, kad apibrėžtume švarią funkciją. Dabar, kai turime funkciją, galime naudoti funkciją kitose mūsų programos dalyse. Naudoti funkciją dažnai vadinama “funkcijos kvietimu”.

Funkcijos kvietimas yra daug paprastesnis nei funkcijos deklaravimas. Norėdami kvieti funkciją, galime naudoti jos pavadinimą, atidaryti skliaustus, perduoti jai keletą argumentų ir uždaryti skliaustus. Kai tai padarysime, funkcija grąžins mums grąžinimo vertę, kurią apibrėžėme. Priklausomai nuo to, ką norime atlikti su ta grąžinama verte, galime ją priskirti kintamajam arba konstantai, galime atlikti dar daugiau skaičiavimų su ja, galime ją siųsti kitoms kompiuteriams arba galime tiesiogiai parodyti rezultatus. Pažvelkime į keletą pavyzdžių.

// pradėkime su funkcija, kuri priima du argumentus
// padaugina juos ir grąžina rezultatą.
// mes galime arba tiesiogiai grąžinti rezultatą,
// arba galime laikinai sukurti konstantą 
// ir grąžinti tą konstantą taip pat.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// dvi aukščiau pateiktos funkcijos duos mums tą patį rezultatą
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// mes galime patikrinti funkcijų rezultatų lygybę 
// su kita funkcija
function checkEquality(number1, number2){
    return number1 === number2;
// jei abiejų funkcijų rezultatai yra tokie patys,
// checkEquality funkcija grąžins "true" 
// kaip boolean duomenų tipą
const isEqual = checkEquality(result1, result2);
// dabar galime naudoti tą boolean vertę, kad parodytume pranešimą
if (isEqual){
    alert("Abu duoda tą patį rezultatą!");
} else {
   alert("Tai nėra tas pats dalykas!");
}

Vykdant aukščiau pateiktą kodą Chrome Snippets, mes gautume šį rezultatą:

Iki šiol mes dirbome su švariomis funkcijomis, ir tai paprastai yra tai, ko siekiame programuodami didžiąją laiko dalį. Bet tai nereiškia, kad dirbsite tik su švariomis funkcijomis. Kai turite supratimą apie švarias funkcijas, nešvarios funkcijos yra palyginti lengvesnės. Kai mes apibrėžiame funkciją arba deklaruojame funkciją, po funkcijos pavadinimo mes iš tikrųjų neturime perduoti jai jokių parametrų. Tokiu atveju mes paliksime skliaustus tuščius, mes taip pat neturime grąžinti kažko iš funkcijos.

Dar daugiau, kadangi mes galime rašyti bet kokį kodą funkcijos skliaustuose, mes galime sąveikauti su išoriniu pasauliu, siųsti ir gauti duomenis, keisti esamus duomenis, rodyti pranešimus ir taip toliau. Vykdant visus šiuos veiksmus, nėra draudžiama, o console.log pareiškimų pridėjimas programavimo proceso metu gali būti tikrai naudingas. Todėl mes tiesiogiai nesistengiame vengti nešvarių funkcijų, tačiau kadangi jos gali sukelti daug trinties ir klaidų kode, įskaitant tai, kad jūsų kodas gali tapti sunkiau testuojamas, mes sieksime atskirti užduotis į švarias JavaScript funkcijas kiek įmanoma. Net kai mes naudojame, kad padarytume savo funkcijas nešvarias, pridėdami alert arba console.log pareiškimus, mes paprastai norime juos pašalinti iš savo kodo arba ištrinti, arba užkomentuoti.

Paimkime keletą pavyzdžių.

// pasveikinkite vartotoją su nešvaria funkcija
// ji nepriima argumentų ir neduoda grąžinimo
// ji taip pat sąveikauja su išoriniu pasauliu, 
// rodydama pranešimą
function greet(){
    alert("Sveiki, vartotojau!");
}
// atkreipkite dėmesį, kad rezultatai nebus rodomi 
// nebent mes kviesime funkciją
greet();
// atlikite keletą skaičiavimų ir juos užfiksuokite
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// tai parodys rezultatą JavaScript konsolėje, kurią turime žemiau
// Konsolė, kurią ką tik naudojome, yra plačiai naudojama programavime
// įskaitant JavaScript.
// console.log pareiškimai gali būti labai naudingi 
// norint pasakyti, kas vyksta jūsų programoje
// tokiu būdu, jei kažkas netikėto nutinka 
// galite pamatyti tiksliai kur ir kada tai nutinka
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("Pirmas skaičius yra " + num1);
    console.log("Antras skaičius yra " + num2);
    const result = num1 * num2;
    console.log("Gautas daugybos rezultatas yra " + result);
}

// kvieskime aukščiau pateiktą funkciją su dviem pasirinktais skaičiais
// ir patikrinkime mūsų JavaScript konsolę dėl console.log
multiplyTwoNums(5, 7);

Vykdant aukščiau pateiktą kodą, gautume šiuos rezultatus:

Kaip matote iš išvesties, mes turime pranešimo pareiškimą, rodomą iš pirmos funkcijos, kurią vykdome. Mes turime gautą skaičių 49 užfiksuotą JavaScript konsolėje. Tiesiog po to, mes turime išsamesnę išvestį konsolėje apie trečią funkciją. console.log pareiškimų darymas yra gana įprastas programavime, priklausomai nuo naudojamos programavimo kalbos, tikslus pavadinimas gali keistis, tačiau idėja išlieka ta pati. Su console.log pareiškimais galime pažvelgti į mūsų programą ir geriau suprasti mūsų kodą. Tai ypač naudinga priemonė, kai kažkas negerai jūsų programoje ir jūs bandote išsiaiškinti, kur tiksliai padarėte klaidą.

Kitame mokyme mes pamatysime dar vieną svarbų JavaScript temą, vadinamą objektais. Prieš pereinant prie kito mokymo, gerai būtų dar kartą peržiūrėti šią dalį, kad koncepcijos geriau įsitvirtintų. Taip pat labai rekomenduoju įvesti pavyzdžius, su kuriais dirbome, ir patirti juos iš pirmų lūpų. Kai būsite pasiruošę, tęsiame su objektais JavaScript kitame mokyme.