JavaScript-funktioner. Del 7 JavaScript-kursus fra begynder til avanceret i 10 blogindlæg

Dette er del 7 af JavaScript blogindlæg serien, der vil tage dig fra nybegynder til avanceret. Ved slutningen af denne serie vil du kende alle de grundlæggende ting, du skal vide for at begynde at kode i JavaScript. Uden videre, lad os komme i gang med den syvende tutorial.

JavaScript funktioner – indholdsfortegnelse:

1. Typer af JavaScript funktioner
2. Ren funktioner i JavaScript

Indtil nu har vi set nogle ret store aspekter af JavaScript sammen med nogle af de mest almindelige kodnings bedste praksis, vi bør følge. Disse såkaldte praksisser er der af en grund, og når vi bruger dem, vil de spare os for mange fejl og frustrationer, som vi ellers ville stå overfor. En af de bedste praksisser, vi har set, var at følge DRY-princippet, som grundlæggende sagde: Gentag ikke dig selv. En måde, vi anvendte dette princip, var at bruge løkker i vores program, mere specifikt “for-løkker” sparede os for meget tid og kode. I denne tutorial vil vi se en anden vigtig byggesten i programmering, og den kaldes “funktioner”.

Typer af JavaScript funktioner

Funktioner er ekstremt almindelige i programmering, og dette inkluderer også JavaScript. Faktisk er de så almindelige, at nogle JavaScript-rammer som React blev bygget omkring at udnytte JavaScript-funktioner som en grundlæggende byggesten til at skabe frontenden af hjemmesiderne. Og de gjorde dette af en god grund. JavaScript-funktioner giver en høj fleksibilitet, samtidig med at de giver meget forudsigelig og modulær kode. Og det resulterer i meget klarere kode med færre gentagelser og meget færre fejl. En af de første ting, du skal vide om funktioner, er, at der er to hovedtyper af funktioner. De er nemlig “rene funktioner” og “urene funktioner”. Generelt set vil vi gerne bruge rene funktioner, hvor vi kan, så meget som muligt. Rene funktioner giver flere fordele, der gør dem meget lettere at arbejde med sammenlignet med urene funktioner. Lad os se på rene JavaScript-funktioner først og derefter dykke ned i urene funktioner også.

Rene funktioner i JavaScript

Rene funktioner er i bund og grund funktioner, der følger visse regler. Og fordi de følger disse regler, er de meget forudsigelige, lettere at fejlfinde i et større system, modulære sammen med nogle andre fordele.

En ren funktion modtager noget input og returnerer noget output. Den ændrer ikke inputtene direkte, eller den interagerer ikke med miljøet på nogen anden måde. Det vil sige, at den ikke sender dig advarsler, giver dig en erklæring, mens den gør noget andet, eller den interagerer ikke med sit miljø på nogen anden måde.

På denne måde, når du arbejder med en ren funktion, ved du, at uanset hvor du kører din kode, eller hvornår du kører din kode, så længe du giver de samme input, vil du få de samme output. Lad os se det med nogle eksempler.

// fordoble det oprindelige tal
function double(num){
    return num * 2;
}

// tredoble det oprindelige tal
function triple(num){
    return num * 3;
}

// læg 100 til det oprindelige tal
function add100(num){
    return num + 100;
}

// læg to tal sammen
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// gang to tal sammen
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Alle de ovenstående JavaScript-funktioner er rene funktioner. Ved nærmere eftersyn har du måske set det mønster, vi bruger, når vi opretter rene funktioner. Første skridt er, at vi skriver nøgleordet “function” for at fortælle JavaScript, at vi vil definere en funktion.

Næste skridt er at give funktionen et navn, helst bør dette navn være kort, men alligevel beskrivende nok til, at nogen, der kommer forbi, kan forstå, hvad funktionen gør. For eksempel, hvis vi lægger 100 til et tal, kan vi navngive funktionen “add100”, hvis vi fordobler et tal, kan vi navngive funktionen “double” og så videre.

Når vi har navngivet funktionen passende, er næste skridt at give den nogle input. Vi angiver inputtene inden for parenteser, og hvis vi har flere input, adskiller vi dem med et komma. Ligesom vi gjorde ved “multiplyTwoNums” funktionen. (Også, som en sidebemærkning, refereres tal ofte til som “nums” for kort i programmering, så når vi navngiver en funktion, kan vi bruge den almindelige viden til at have korte, men beskrivende funktionsnavne.)

De input, vi giver til funktionen, kaldes også ofte “parametre”, når vi opretter JavaScript-funktioner, beslutter vi, hvor mange parametre funktionen vil have. Når vi beslutter at bruge funktionen, giver vi disse parametre “værdier”. De værdier, vi giver, når vi bruger funktionen, kaldes også ofte “argumenter”. Så når vi giver et input til funktionen, kaldes denne proces også for “at videregive argumenter” til en funktion. Lad os se nogle eksempler på det.

// først lad os definere funktionen, der tager et tal 
// og ganger det med 10
function multiplyBy10(num1){
    return num1 * 10;
}

// nu lad os kalde den funktion
// gem resultatet i en konstant
// og vis resultaterne
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 er her parameteren.
// vi videregav værdien 3 som et argument til funktionen.
// vi gemte resultaterne af funktionen
// i en konstant kaldet bigNum.
// vi viste konstanten kaldet bigNum til brugeren.

Som du så i den ovenstående kode, selv når vi vil vise noget til brugeren, holder vi funktionen adskilt fra alert-funktionen. Hvis vi skulle vise resultaterne til brugeren inde i funktionen, ville dette kræve, at funktionen interagerede med andre dele af computeren og ville gøre vores funktion uren. Så generelt set vil vi gerne bruge funktionerne til at give dem input og forvente en returneret værdi. Når vi får den returnerede værdi, kan vi faktisk vise den eller udføre andre JavaScript-funktioner med den afhængigt af vores behov, men pointen er at holde bekymringerne om at vise resultaterne og beregne resultaterne adskilt.

Så indtil nu har vi set, at vi kan bruge “function” nøgleordet til at begynde at erklære funktionen, så navngiver vi funktionen passende, så åbner og lukker vi parenteser og fortæller funktionen, hvilke parametre den vil kræve, så åbner vi krøllede parenteser og fortæller funktionen, hvad vi vil have den til at gøre, når vi kommer til et resultat, returnerer vi det resultat med “return” nøgleordet. Og så lukker vi de krøllede parenteser. Alle disse trin var nødvendige for at definere en ren funktion. Nu hvor vi har en funktion, kan vi bruge en funktion i andre dele af vores program. At bruge en funktion kaldes ofte for “at kalde en funktion”.

At kalde en funktion er meget enklere end at erklære funktionen. For at kalde en funktion kan vi bruge dens navn, åbne parenteser, videregive den nogle argumenter og lukke parenteserne. Når vi gør dette, vil funktionen returnere os den returnerede værdi, som vi definerede. Afhængigt af hvad vi vil udføre med den returnerede værdi, kan vi tildele den til en variabel eller en konstant, vi kan udføre endnu flere beregninger med den, vi kan sende den til andre computere, eller vi kan også direkte vise resultaterne. Lad os se nogle eksempler på det.

// lad os starte med en funktion, der tager to argumenter
// ganger dem og returnerer resultatet.
// vi kan enten direkte returnere resultatet,
// eller vi kan midlertidigt oprette en konstant 
// og returnere den konstant også.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// de to funktioner ovenfor vil give os det nøjagtige samme resultat
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// vi kan tjekke ligheden af funktionsresultaterne 
// med en anden funktion
function checkEquality(number1, number2){
    return number1 === number2;
// hvis resultaterne af begge funktioner er de samme,
// vil checkEquality-funktionen returnere "true" 
// som en boolesk datatype
const isEqual = checkEquality(result1, result2);
// nu kan vi bruge den booleske værdi til at vise en besked
if (isEqual){
    alert("Begge giver det samme resultat!");
} else {
   alert("De er ikke det samme!");
}

At køre koden ovenfor i Chrome Snippets ville give os følgende resultat:

Indtil nu har vi arbejdet med rene funktioner, og dette er normalt, hvad vi sigter efter at kode for det meste af tiden. Men det betyder ikke, at du kun vil arbejde med rene funktioner. Når du har en forståelse af de rene funktioner, er urene funktioner relativt lettere. Når vi definerer en funktion, eller erklærer en funktion, efter at have brugt funktionsnavnet, behøver vi faktisk ikke at videregive den nogen parametre. I så fald vil vi lade parenteserne være tomme, vi behøver heller ikke at returnere noget fra funktionen.

Endda mere, da vi kan skrive enhver kode inde i de krøllede parenteser af en funktion, kan vi interagere med den ydre verden, sende og modtage data, ændre eksisterende data, vise advarsler og så videre. At gøre alt dette er ikke forbudt, og at tilføje console.log-udsagn under kodeudviklingsprocessen kan faktisk være meget nyttigt. Derfor holder vi os ikke direkte væk fra urene funktioner, men da de kan forårsage meget friktion og fejl i koden, herunder at gøre din kode sværere at teste, vil vi sigte mod at adskille opgaver i rene JavaScript-funktioner så meget som muligt. Selv når vi bruger til at gøre vores funktioner urene ved at tilføje alert- eller console.log-udsagn, vil vi normalt gerne fjerne dem fra vores kode enten ved at slette dem eller kommentere dem ud.

Lad os se nogle eksempler på det.

// hils bruger med en uren funktion
// den tager ingen argumenter og giver ingen returnering
// den interagerer også med den ydre verden ved 
// at vise en advarsel
function greet(){
    alert("Hej bruger!");
}
// bemærk, at resultaterne ikke vises 
// medmindre vi kalder funktionen
greet();
// lav nogle beregninger og console log dem
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// dette vil vise resultatet i JavaScript-konsollen nedenfor
// Konsollen, vi lige har brugt, er meget brugt i programmering
// herunder i JavaScript.
// console.log-udsagn kan være meget nyttige 
// til at fortælle dig, hvad der sker inde i dit program
// på denne måde, hvis noget uventet sker 
// kan du se præcist hvor og hvornår det sker
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("Det første tal er " + num1);
    console.log("Det andet tal er " + num2);
    const result = num1 * num2;
    console.log("Det resulterende multiplikation er " + result);
}

// lad os kalde funktionen ovenfor med to tal, vi vælger
// og tjekke vores JavaScript-konsol for console logs
multiplyTwoNums(5, 7);

At køre koden ovenfor ville resultere i følgende:

Som du kan se fra outputtet, har vi advarselsudsagnet, der vises fra inde i den første funktion, vi kører. Vi har det resulterende tal 49 logget ud i JavaScript-konsollen. Lige efter det har vi mere detaljeret output i konsollen om den tredje funktion. At lave console.log-udsagn er ret almindeligt i programmering, afhængigt af det programmeringssprog, du bruger, kan det præcise navn ændre sig, men ideen forbliver den samme. Med console.log-udsagn kan vi tage et indblik i vores program og forstå vores kode bedre. Dette er især et nyttigt værktøj, når noget går galt i dit program, og du prøver at finde ud af, hvor præcist du har lavet en fejl.

I den næste tutorial vil vi se et andet vigtigt emne i JavaScript kaldet objekter. Før vi går videre til den næste tutorial, er det en god idé at gennemgå denne del endnu en gang, så koncepterne kan synke ind. Jeg anbefaler også stærkt at skrive de eksempler, vi har arbejdet med, og opleve dem på første hånd. Når du er klar, fortsætter vi med objekterne i JavaScript i den næste tutorial.