JavaScript-funktioner. Del 7 JavaScript-kurs från nybörjare till avancerad på 10 blogginlägg

Detta är del 7 av blogginläggsserien om JavaScript som tar dig från nybörjare till avancerad. I slutet av denna serie kommer du att känna till alla grunder du behöver veta för att börja koda i JavaScript. Utan vidare ado, låt oss börja med den sjunde handledningen.

JavaScript-funktioner – innehållsförteckning:

1. Typer av JavaScript-funktioner
2. Ren funktioner i JavaScript

Hitintills har vi sett ganska stora aspekter av JavaScript tillsammans med några av de mest vanliga kodningspraxis vi bör följa. Dessa så kallade praxis finns av en anledning och när vi använder dem kommer de att spara oss mycket fel och frustration som vi annars skulle möta. En av de bästa praxis vi har sett var att följa DRY-principen, som i grunden sa: Upprepa dig inte själv. Ett sätt vi tillämpade denna princip var att använda loopar i vårt program, mer specifikt “for-loopar” sparade oss mycket tid och kod. I denna handledning kommer vi att se en annan viktig byggsten i programmering, och den kallas “funktioner”.

Typer av JavaScript-funktioner

Funktioner är extremt vanliga i programmering, och detta inkluderar även JavaScript. Faktum är att de är så vanliga att vissa JavaScript-ramverk som React, byggdes kring att utnyttja JavaScript-funktioner som en grundläggande byggsten för att skapa fronten av webbplatser. Och de gjorde detta av en god anledning. JavaScript-funktioner ger en hög flexibilitet, samtidigt som de ger mycket förutsägbar och modulär kod. Och det resulterar i mycket tydligare kod med färre upprepningar och mycket färre fel. En av de första sakerna du bör veta om funktioner är att det finns två huvudtyper av funktioner. De är nämligen “rena funktioner” och “orena funktioner”. Generellt sett vill vi använda rena funktioner där vi kan, så mycket som möjligt. Rena funktioner ger flera fördelar som gör dem mycket enklare att arbeta med jämfört med orena funktioner. Låt oss se rena JavaScript-funktioner först och sedan dyka ner i orena funktioner också.

Rena funktioner i JavaScript

Rena funktioner är i grunden funktioner som följer vissa regler. Och eftersom de följer dessa regler är de mycket förutsägbara, lättare att felsöka i ett större system, modulära tillsammans med några andra fördelar.

En ren funktion tar emot viss indata och returnerar viss utdata. Den modifierar inte indata direkt eller interagerar med miljön på något annat sätt. Det sagt, den skickar inte varningar, ger dig ett meddelande medan den gör något annat, eller interagerar med sin miljö på något annat sätt.

På så sätt, när du arbetar med en ren funktion vet du att oavsett var du kör din kod eller när du kör din kod, så länge du ger samma indata, kommer du att få samma utdata. Låt oss se det med några exempel.

// dubbla det ursprungliga numret
function double(num){
    return num * 2;
}

// tredubbla det ursprungliga numret
function triple(num){
    return num * 3;
}

// lägg till 100 till det ursprungliga numret
function add100(num){
    return num + 100;
}

// lägg till två nummer
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiplicera två nummer
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Alla ovanstående JavaScript-funktioner är rena funktioner. Vid en närmare titt kanske du har sett mönstret vi använder när vi skapar rena funktioner. Första steget är att vi skriver nyckelordet “function” för att berätta för JavaScript att vi vill definiera en funktion.

Nästa steg är att ge funktionen ett namn, helst bör detta namn vara kort, men ändå tillräckligt beskrivande för att någon som kommer förbi ska förstå vad funktionen gör. Till exempel, om vi lägger till 100 till ett nummer, kan vi namnge funktionen “add100”, om vi dubblerar ett nummer, kan vi namnge funktionen “double” och så vidare.

När vi har namngivit funktionen på rätt sätt, är nästa steg att ge den viss indata. Vi anger indata inom parenteser och om vi har flera indata separerar vi dem med ett kommatecken. Precis som vi gjorde i “multiplyTwoNums”-funktionen. (Även som en sidokommentar, nummer kallas vanligtvis “nums” för kort i programmering, så när vi namnger en funktion kan vi använda den allmänna kunskapen för att ha korta men beskrivande funktionsnamn.)

Indata vi ger till funktionen kallas också vanligtvis “parametrar”, när vi skapar JavaScript-funktioner bestämmer vi hur många parametrar funktionen kommer att ha. När vi bestämmer oss för att använda funktionen ger vi dessa parametrar “värden”. De värden vi ger när vi använder funktionen kallas också vanligtvis “argument”. Så när vi ger en indata till funktionen, kallas denna process också för “att skicka argument” till en funktion. Låt oss se några exempel på det.

// först definierar vi funktionen som tar ett nummer 
// och multiplicerar det med 10
function multiplyBy10(num1){
    return num1 * 10;
}

// nu kallar vi den funktionen
// sparar resultatet i en konstant
// och visar resultaten
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 här är parametern.
// vi skickade värdet 3 som ett argument till funktionen.
// vi sparade resultaten av funktionen
// i en konstant som kallas bigNum.
// vi visade konstanten som kallas bigNum för användaren.

Som du såg i koden ovan, även när vi vill visa något för användaren, håller vi funktionen åtskild från varningsfunktionen. Om vi skulle visa resultaten för användaren inuti funktionen, skulle detta kräva att funktionen interagerar med andra delar av datorn och skulle göra vår funktion oren. Så generellt sett vill vi använda funktionerna för att ge dem indata och förvänta oss ett returnerat värde. När vi får det returnerade värdet kan vi faktiskt visa det eller utföra andra JavaScript-funktioner med det beroende på våra behov, men poängen är att hålla bekymren med att visa resultaten och beräkna resultaten åtskilda.

Så hittills har vi sett att vi kan använda nyckelordet “function” för att börja deklarera funktionen, sedan namnger vi funktionen på rätt sätt, sedan öppnar och stänger vi parenteser och berättar för funktionen vilka parametrar den kommer att behöva, sedan öppnar vi klammerparenteser och berättar för funktionen vad vi vill att den ska göra, när vi kommer till ett resultat returnerar vi det resultatet med nyckelordet “return”. Och sedan stänger vi klammerparenteserna. Alla dessa steg var nödvändiga för att definiera en ren funktion. Nu när vi har en funktion kan vi använda en funktion i andra delar av vårt program. Att använda en funktion kallas vanligtvis för “att kalla en funktion”.

Att kalla en funktion är mycket enklare än att deklarera funktionen. För att kalla en funktion kan vi använda dess namn, öppna parenteser, skicka den några argument och stänga parenteserna. När vi gör detta kommer funktionen att returnera oss det returnerade värde som vi definierade. Beroende på vad vi vill utföra med det returnerade värdet kan vi tilldela det till en variabel eller konstant, vi kan utföra ännu fler beräkningar med det, vi kan skicka det till andra datorer, eller vi kan direkt visa resultaten också. Låt oss se några exempel på det.

// låt oss börja med en funktion som tar två argument
// multiplicerar dem och returnerar resultatet.
// vi kan antingen direkt returnera resultatet,
// eller så kan vi temporärt skapa en konstant 
// och returnera den konstanten också.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// de två funktionerna ovan kommer att ge oss exakt samma resultat
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// vi kan kontrollera likheten av funktionsresultaten 
// med en annan funktion
function checkEquality(number1, number2){
    return number1 === number2;
// om resultaten av båda funktionerna är desamma,
// kommer checkEquality-funktionen att returnera "true" 
// som en boolean datatyp
const isEqual = checkEquality(result1, result2);
// nu kan vi använda det booleanvärdet för att visa ett meddelande
if (isEqual){
    alert("Båda ger samma resultat!");
} else {
   alert("De är inte samma sak!");
}

Att köra koden ovan i Chrome Snippets skulle ge oss följande resultat:

Hittills har vi arbetat med rena funktioner, och detta är vanligtvis vad vi strävar efter att koda för mestadels. Men det betyder inte att du bara kommer att arbeta med rena funktioner. När du har en förståelse för de rena funktionerna, är orena funktioner relativt enklare. När vi definierar en funktion, eller deklarerar en funktion, efter att ha använt funktionsnamnet, behöver vi faktiskt inte skicka den några parametrar. I det fallet lämnar vi parenteserna tomma, vi behöver inte heller returnera något från funktionen.

Ännu mer, eftersom vi kan skriva vilken kod som helst inuti klammerparenteserna av en funktion kan vi interagera med omvärlden, skicka och ta emot data, modifiera befintlig data, visa varningar, och så vidare. Att göra allt detta är inte förbjudet, och att lägga till console.log-satser under kodutvecklingsprocessen kan faktiskt vara riktigt hjälpsamt. Det är därför vi inte direkt håller oss borta från orena funktioner, men eftersom de kan orsaka mycket friktion och fel i koden, inklusive att göra din kod svårare att testa, kommer vi att sträva efter att separera uppgifter i rena JavaScript-funktioner så mycket som möjligt. Även när vi använder för att göra våra funktioner orena genom att lägga till varnings- eller console.log-satser, vill vi vanligtvis ta bort dem från vår kod antingen genom att radera dem eller kommentera dem.

Låt oss se några exempel på det.

// hälsa användaren med en oren funktion
// den tar inga argument och ger ingen retur
// den interagerar också med omvärlden genom 
// att visa en varning
function greet(){
    alert("Hej användare!");
}
// notera att resultaten inte kommer att visas 
// om vi inte kallar funktionen
greet();
// gör några beräkningar och logga dem i konsolen
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// detta kommer att visa resultatet i JavaScript-konsolen vi har nedan
// Konsolen vi just använde är mycket använd i programmering
// inklusive i JavaScript.
// console.log-satser kan vara riktigt hjälpsamma 
// för att berätta vad som händer inuti ditt program
// på så sätt, om något oväntat händer 
// kan du se exakt var och när det händer
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("Första numret är " + num1);
    console.log("Andra numret är " + num2);
    const result = num1 * num2;
    console.log("Den resulterande multiplikationen är " + result);
}

// låt oss kalla funktionen ovan med två nummer vi väljer
// och kontrollera vår JavaScript-konsol för console logs
multiplyTwoNums(5, 7);

Att köra koden ovan skulle resultera i följande:

Som du kan se från utdata, har vi varningssatsen som visas från inuti den första funktionen vi körde. Vi har det resulterande numret 49 loggat i JavaScript-konsolen. Direkt efter det har vi mer detaljerad utdata i konsolen om den tredje funktionen. Att göra console.log-satser är ganska vanligt i programmering, beroende på vilket programmeringsspråk du använder kan det exakta namnet ändras, men idén förblir densamma. Med console.log-satser kan vi ta en inblick i vårt program och förstå vår kod bättre. Detta är särskilt ett användbart verktyg när något går fel i ditt program och du försöker lista ut var exakt du gjorde ett misstag.

I den nästa handledningen kommer vi att se ett annat viktigt ämne i JavaScript som kallas objekt. Innan vi går vidare till nästa handledning är det en bra idé att granska denna del en gång till för att koncepten ska sjunka in. Jag rekommenderar också starkt att skriva de exempel vi arbetade med och uppleva dem på första hand. När du är redo, kommer vi att fortsätta med objekten i JavaScript i nästa handledning.