JavaScript funkcijas

DG WEB FACTORY » Pamācības » JavaScript funkcijas

Funkcijas

JavaScript funkcijas mēs izmantojam, lai saīsinātu kodu, lai mums nebūtu vislaik jāatkārtojas. Šīs funkcijas varam deklarēt vienā vietā un izmantot vairākās vietās mūsu programmā.

JavaScript funkcijas ir koda bloki, ko mēs veidojam ar konkrētu mērķi, izpildīt kādu konkrētu uzdevumu.

Iedomājamies, ka mums ir šāda programma:

Mums sanāktu daudz atkārtot vienu un to pašu, kā arī, ja vajadzētu kaut ko izmainīt, tad būtu jāmaina visās vietās, kur kods atkārtojas. Ja mums būtu liela programma, tad tas būtu ļoti laikietilpīgi un neērti. Kā arī programmēšanā ir tāds termins kā DRY (DON’T REPEAT YOURSELF), kas nozīmē, ka labā prakse ir tāda, ka mēs kodā neatkārtojamies.

Tas ko mēs varam darīt, lai labotu šo mūsu kodu, mēs varam izveidot funkciju un vienkārši izsaukt šo funkciju visās vietās, kur mums viņa nepieciešama mūsu kodā.

Funkcijas sintakse ir šāda:

function nosaukums(){

funkcijas loģika

}

Sākumā iet vārds function, pēc tam funkcijas nosaukums. Funkcijas nosaukuma, tāpat kā mainīgo nosaukumam jābūt loģiskam un jāapraksta par ko ir funkcija. Pēc tam vienmēr iet iekavas. Iekavās var būt un var nebūt paramteri. Tad iet figūriekavas jeb koda bloks, kurā mēs rakstīsim uzdevumu, kas jāizpilda funkcijai.

Kad mēs uzrakstām kaut kādu funkciju, pats par sevi nekas nenotiek. Funkcija ir arī jāizsauc un to dara šādi:

nosaukums();

Ja mēs kaut ko pamainām funkcijā, tad tas mainās visās instancēs, kur šī funkcija ir izsaukta.

Izveidosim vienkāršu funkciju, lai saīsinātu mūsu kodu no piemēra.

 

Mēs izveidojam funkciju ar nosaukumu hello:function hello() {

}

Tālāk mēs ievietosim to, ko gribam, lai mūsu funkcija attēlo, šajā gadījumā to, kas bija mūsu programmā kā vienkārši konsole logi, kas atkārtojās vairākās vietās mūsu programmā.

function hello() {
console.log(‘Sveiki Jāni’);
console.log(‘Sāksim darbu’);
console.log(‘Jauku dienu’);
}

Bet, lai šo attēlotu, mums šī funkcija ir jāizsauc, un mēs to varam izsaukt ar

hello(); //funkcijas nosaukums un iekavas.

Izsaucam funkciju visās vietās, kurās mums bija konsole logi, kas atkārtojās.

Un konsolē mēs redzam, ka funkcija, ko 3x izsaucām, arī 3x ir redzama.

Paramteri un argumenti

Tālāk turpinot šo pašu piemēru, iedomāsimies, ka mēs vēlamies 3 dažādus sveicienus. Mēs, protams, varam uztaisīt 3 dažādas funkcijas un izsaukt tās kur nepieciešams mūsu kodā.

Tas izskatītos šādi, bet tas arī būtu ļoti gari. Tādēļ, lai izvairītos no šāda pieraksta un saīsinātu kodu, mēs izmantosim tādu lietu kā parametri. Parametri ir tādi kā lokālie mainīgie jeb “pleisholderi”, kas norāda funkcijai, ka vēlāk šiem parametriem tiks dotas vērtības.

Šos parametrus mēs rakstam iekavās un rakstam vienkārši to nosaukums bez let vai const. Funkcijai var pievienot vairākus parametrus. Sākumā pievienosim vienu parametru firstName.

Un norādīsim, lai konsolē tiktu izvadīts Sveiki un paramters firstName.

Ja mēs vienkārši izsauksim funkciju hello();, kā mēs to jau mākam, tad būs kļūda undefined, jo mums taču nekur nav definēts, kas tas firstName tāds ir.

function hello(firstName){
console.log(`Sveiki ${firstName}`);
}

hello();

Un, savukārt, norādīt, kas ir firstName mēs varam, norādot iekavās, vietā, kur izsaucam funkciju. Un tas saucās arguments.

function hello(firstName){
console.log(`Sveiki ${firstName}`);
}

hello(‘Jānis’); //Jānis šajā gadījumā ir arguments, kas būs vērtība firstName

Un konsolē redzēsim “Sveiki Jānis”.

Tāpat mēs varam funkcijā pievienot vairākus parametrus un argumentus, atdalot tos ar komatu:

Kā arī mēs kā argumentu varam norādīt arī mainīgo:

Return

Protams, funkcijās mēs varam ne tikai vienkārši izvadīt kaut ko konsolē, bet arī veikt kādus aprēķinus un darīt vēl daudz sarežģītākas lietas. Mēs varam funkcijā atgriezt kaut kādu vērtību, un to varam izdarīt ar tādu steitmentu kā return. Lai labāk saprastu, apskatīsim piemēru, kurā vēlamies pārvērst collas centimetors. Iedomāsimies, ka mums ir kaste, un kastes sienas augstums ir 80 collas.

Izveidojam mainīgo wallheight ar vērtību 80 un funkciju calculate().

const wallheight = 80;

function calculate(){
}

Šai funkcijai pievineosim paramteru value

const wallheight = 80;

function calculate(value){
}

Un iekš funkcijas izveidojam jaunu mainīgo newValue, kura vērtība būs formula, kurā mēs sareizinām parametru ar 2.45, lai pārvērstu no collām uz centimetriem, jo viena colla ir 2.45 cm.

const wallheight = 80;

function calculate(value){
const newValue =value * 2.45;
}

un  tālāk mēs lietosim return, lai atgrieztu newValue vērtību:

const wallheight = 80;

function calculate(value){
const newValue =value * 2.45;
return newValue;
}

Tālāk mums šī funcija ir jāizsauc, jo kā mēs zinām, bez izsaukšanas tā nekur neparādīsies, ko mēs varam izdarīt, kā mēs jau zinām, šādi:

const wallheight = 80;

function calculate(value){
const newValue =value * 2.45;
return newValue;
}
console.log(calculate(wallheight));

Bet mēs varam arī izveidot jaunu mainīgo

const height = calculate(wallheight), kam norādam, ka tas ir vienāds ar mūsu jauno funkciju un kā argumentu norādām wallheight, kas ir 80;

un tad konsolē izvadīt šī mainīgā vērtību

 

Tieši tāpat mēs varam arī šo izdarīt ar vairākajiem mainīgajiem masīvā, piemēram, ja mums vajadzētu centimetros pārvērst, gan augstumu, gan platumu:

Pievienojam vēl vienu mainīgo wallWidth:

const wallheight = 80;
const wallWidth = 120;

function calculate(value){
const newValue =value * 2.45;
return newValue;
}

Un vēl vienu mainīgo width, kuram funkcijas arguments ir wallWidthconst wallheight = 80;

const wallheight = 80;
const wallWidth = 120;
function calculate(value){
constnewValue =value * 2.45;
return newValue;
}
const height = calculate(wallheight);
const width = calculate(wallWidth);

Mēs izveidojam masīvu dimensions, norādot masīva vērtības mainīgos width un height.const wallheight = 80;
const wallWidth = 120;
function calculate(value){
constnewValue =value * 2.45;
return newValue;
}
const height = calculate(wallheight);
const width = calculate(wallWidth);
const dimensions = [width,height];

Un izvadām konsolē masīvu dimensions.const wallheight = 80;
const wallWidth = 120;function calculate(value){
const newValue =value * 2.45;
return newValue;
}

const height = calculate(wallheight);
const width = calculate(wallWidth);

const dimensions = [width,height];

console.log(dimensions);

Konsolē redzam masīvu ar aprēķināto augstumu un platumu centimetros.

Bet šo visu mēs varam vēl saīsināt:

const wallheight = 80;
const wallWidth = 180;

function calculate(value){ //noņemam mainīgo un vienkārši izvadam value reiz 2.45
return value * 2.45;
}

const height = calculate(wallheight);
const width = calculate(wallWidth);

const dimensions = [width,height];

console.log(dimensions);

Kuru no variantiem izvēlēties, tas atkarīgs no funkcijas sarežģītības kāda jums būs izveidota. Jo iespējams, būs tādas funkcijas, kurās nevarēs izmantot īso variantu, jo tās būs sarežģītākas un tajās būs nepieciešams vispirms kaut ko aprēķināt pirms atgriezt kaut ko.

Pie return svarīgi ņemt vērā to, ka viss ko ievadīsiet pēc return funkcijā, tas netiks izvadīts. Jo return ir kā funkcijas nobeigums. Arī Visual Studio Code, jūs redzēsiet, ka tas, ko ievietojat pēc return ir blāvs, netiek ņemts vērā un konsolē nebūs redzams teksts Hello, jo tas ir pēc return.

Mēdz būt dažādas funkcijas, ne visās funkcijās obligāti ir return.

Funkciju deklarēšana

Ir dažādi veidi kā deklarēt funkciju. Mēs varam to darīt šādi, kā jau darījām piemēros:

Bet funkciju mēs varam deklarēt arī šādi, rakstot funkciju kā mainīgā vērtību un bez nosaukuma. Šādas funkcijas tiek sauktas par anonīmajām funkcijām.

Un savukārt iepriekšējo varinatu mēs varam uzrakstīt vēl citā veidā, kad mums nevajag thirdValue mainīgo, bet mēs pa tiešo ieliekam mainīgo add masīvā:

Vēl ir arī pavisam jauns funkcijas deklarēšanas veids no ES6 versijas – arrow functions, par to vairāk, variet apskatīt pamācībā par: OBJEKTIEM.