Variabler og datatyper i JavaScript. Del 3 JavaScript-kursus fra begynder til avanceret i 10 blogindlæg

Dette er del 3 af JavaScript blogindlæg serien, der vil hjælpe dig med at udforske emnet variabler og datatyper i JavaScript. 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 tredje tutorial.

Variabler og datatyper i JavaScript – indholdsfortegnelse:

1. Variabler
2. Grundlæggende datatyper i JavaScript

I dette blogindlæg vil vi fortsætte fra, hvor vi slap i det andet blogindlæg. På dette tidspunkt bør du have din Google Chrome-browser åben og mere specifikt have din JavaScript-konsol åben. Hvis du af en eller anden grund har lukket dem, ville det være et godt tidspunkt at åbne dem igen.

Hvis du er på en Mac, er tastaturgenvejen til at åbne konsollen at trykke på “Option + Command + J”, efter du har åbnet Chrome. Hvis du bruger en Windows-enhed, kan du bruge tastaturgenvejen “Control + Shift + J” for at åbne JavaScript-konsollen, når du har åbnet Chrome. Eller du kan også gå til menuen øverst og gå til Vis -> Udvikler -> JavaScript-konsol.

Variabler

Variabler i JavaScript eller ethvert andet programmeringssprog er ekstremt almindelige. Og det er der en god grund til. Variabler har en meget kritisk rolle i programmering. Kort sagt, variabler giver dig mulighed for at gemme nogle data for at flytte dataene rundt, ændre dem, opdatere eller slette dem i dit program. Det er faktisk et så vigtigt koncept, at der er 3 måder, du kan oprette variabler på. Programmeringsudtrykket for at oprette variabler kaldes “deklarere variabler”, hvilket grundlæggende betyder, at vi erklærer en variabel i computerens hukommelse.

For at oprette variablerne vil vi bruge et af de 3 nøgleord, og de er: “var”, “let” og “const”. En af de første ting, du skal vide om disse 3 nøgleord, er, at indtil 2015 blev kun “var” nøgleordet brugt, og “let” og “const” nøgleordene blev introduceret med en JavaScript-standard kaldet ES6 eller ES2015.

Hvis du ikke har nogen idé om, hvad ES6 eller ES2015 er, er her, hvad du skal vide om det. Da JavaScript først kom ud, implementerede forskellige virksomheder forskellige versioner af JavaScript, og der måtte være en standard, for at din kode kunne køre forudsigeligt og pålideligt i alle de store browsere. Så en organisation kaldet ECMA (European Computer Manufacturing Association) kom op med et sæt JavaScript-standarder, som browsere skulle implementere. Så længe du følger disse standarder, når du skriver JavaScript, bør din kode køre forudsigeligt i henhold til disse standarder. Denne standard kaldes EcmaScript, og de har udgivet opdaterede standarder siden 1997. Og siden 2015 har de udgivet disse standarder årligt, og derfor er den senest udgivne standard kaldet ES2021, når dette blogindlæg skrives.

Men ikke alle udgivelser er de samme, nogle versionsforskelle er ikke så store, mens nogle introducerer ret store ændringer i sproget. De sidste store ændringer skete med ES2015, også kaldet ES6, da det var udgivelsen af version seks af ECMAScript-standardiseringen. En af de betydelige ændringer kom til variabeldeklarationerne.

Før ES6 blev kun “var” nøgleordet brugt, og det var den eneste måde at erklære variabler på, derfor navnet “var”. Var-nøgleordet kom med fleksibiliteter, der kunne forårsage uønskede problemer. Fordi det var betydeligt fleksibelt i brug, var det lettere at lave fejl med variabler, hvis du var mindre forsigtig, end du burde være. For eksempel, hvis du erklærede en variabel kaldet “user1”, kan du ikke gen-erklære en variabel kaldet user1 med de nye “let” og “const” nøgleord, men du kunne gøre det med “var” nøgleordet. Og hvis du glemmer, at du allerede har en user1 i dit program, den anden gang du erklærer user1 med en anden brugers oplysninger, ville du overskrive den faktiske første brugers oplysninger, hvilket effektivt ville slette den første brugers oplysninger.

// dette kan forårsage forvirring
var user1 = "John";
var user1 = "Jack";
// hvis du prøver at gøre det samme 
// med let eller const, får du en fejl
let user1 = "John";
let user1 = "Jack";
// på samme måde får du også en fejl
// hvis du prøver at gøre det samme med const-nøgleordet
const user1 = "John";
const user1 = "Jack";

Men det er ikke sådan, at du ikke vil se “var” nøgleordet blive brugt nogen steder, du vil bestemt se det, især i nogle begynderniveau JavaScript-kurser. Især hvis de er et par år gamle, er der mange tutorials, der stadig viser dig den gamle måde at skrive JavaScript på. Men virkeligheden er, at det bare ikke er den bedste praksis at bruge det længere. I stedet er den bedste praksis at bruge “let” eller “const” nøgleord, når du erklærer variabler, afhængigt af dine behov. Men hvilke behov taler vi om? Kort sagt, hvis du planlægger at ændre værdien inde i en variabel, vil du bruge “let” nøgleordet, hvis du ved, at du ikke vil ændre værdien i en variabel, vil du i stedet gå med “const”. Lad os se nogle eksempler på variabeldeklarationer ved hjælp af både let og const.

// vi kan bruge "let" når vi vil spore brugerens spilevel
// fordi vi ved, at det vil ændre sig
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// vi kan bruge "const" nøgleordet, når vi erklærer bruger-ID
// fordi vi ved, at vi ikke vil ændre det
const userId = 1010101999;

Hvis du også bemærkede fra den ovenstående kode, med de nyeste bedste praksisser, skriver vi kun de deklarerende nøgleord én gang, og det gør vi, når vi først erklærer variablen. Når vi senere vil ændre værdien inde i variablen, bruger vi ikke noget nøgleord før variabelnavnet.

Når vi vil få adgang til de data, som disse variabler eller konstanter indeholder, kan vi simpelthen bruge deres navn. For eksempel, hvis vi vil vise brugeren deres spilevel og deres bruger-id, gør vi det med følgende kode:

// vi kan tilføje bruger-ID til slutningen af sætningen med et plus-tegn
// vi vil forklare dette senere i tutorialen
alert("Dit bruger-ID er: " + userId);
// vi kan også vise brugeren deres spilevel som følgende
alert("Dit nuværende spilevel er: " + gameLevel);
// alternativt kan vi direkte vise 
// indholdet af variablerne ved at vise dem i en alert
alert(userId);
alert(gameLevel);

At køre de sidste to kodeblokke ville give følgende output:

Hvordan navngiver du dine variabler?

Når du navngiver dine variabler, er der visse regler og konventioner, du bør overveje. Den første overvejelse er, hvilke tegn du kan bruge til at navngive dine variabler? Kan de starte eller slutte med et nummer? Er der en almindelig uskreven sandhed om at navngive dine variabler? Lad os besvare alt dette og mere.

Forskellige programmeringssprog har forskellige konventioner for at navngive variabler. I JavaScript er konventionen at navngive dem med det, der kaldes “camel casing”, og det fungerer sådan. Hvis variabelnavnet kun har ét ord, skriver du blot det ord i små bogstaver. Hvis der er flere ord i variabelnavnet, skriver du det første ord med små bogstaver, og du skriver alle de efterfølgende ord med stort begyndelsesbogstav, og du skriver dem uden mellemrum eller andre tegn. For eksempel, hvis vi laver et spil, kunne vi navngive variablerne som følger:

// en enkelt ord variabel
let strength = 50;
// et beskrivende navn, der inkluderer flere ord
let numberOfArrowsLeft = 145;

Udover at bruge alfabetiske tegn kan vi også bruge tal, dollartegn og understregningstegn i variabelnavne. Det er vigtigt at bemærke, at du ikke kan starte variabelnavnet med et nummer, men du kan slutte det med et nummer.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Bemærk, at bare fordi det er muligt, ønsker vi ikke at navngive vores variabler med uklare navne eller med symboler. Og det er et andet emne i sig selv. Når du navngiver variabler, er konventionen at have klare og beskrivende navne. For eksempel, hvis vi skal navngive en variabel for at angive, hvor mange pile der er tilbage i en bueskytterpose, bør vi bruge et beskrivende navn som det, vi brugte i eksemplet ovenfor. Hvis vi blot skulle bruge:

let x = 145;

Dette navn ville ikke fortælle os noget om, hvilken værdi det indeholder. Og selv et par dage efter at have skrevet denne kode, ville vi skulle læse den omgivende kode for at forstå, hvad den variabel kunne betyde. Derfor er det vigtigt, både for din egen klarhed, når du skriver koden, og for dit fremtidige jeg, der måske gennemgår koden, at du vænner dig til at navngive dine variabler på en klar og beskrivende måde. Dette vil også blive endnu vigtigere, når du begynder at arbejde med andre mennesker og viser dem din kode.

På dette tidspunkt tænker du måske: Det er fantastisk, at vi kan flytte dataene rundt og endda ændre dem ved hjælp af variabler. Men hvilke data taler vi om her? Hvorfor satte vi dele i citationstegn, og nogle dele er ikke i citationstegn? For at besvare alt dette og mere, lad os se på de grundlæggende datatyper i JavaScript.

Grundlæggende datatyper i JavaScript

Forskellige datatyper er gode til at gøre forskellige ting. I denne tutorial om grundlæggende datatyper i JavaScript vil vi se de mest grundlæggende 3 typer data, som ofte bruges i JavaScript. Senere i serien vil vi lære om andre datatyper i JavaScript. Når du har lært disse første 3 grundlæggende datatyper, vil det være meget lettere at lære de andre datatyper. De 3 datatyper, vi vil se i denne tutorial, er: Strenge, Tal og Booleans. Uden videre, lad os starte med den første.

Strenge

Hvis du har fulgt med i tutorialen fra begyndelsen, har du allerede arbejdet med datatypen streng! Da vi skrev en alert, der sagde “Hello, World!”, brugte vi datatypen streng til at gemme den tekst, vi skrev. I JavaScript er der 3 måder at repræsentere strenge på. Den første er at omgive din tekst med dobbelte citationstegn. Den anden er at omgive din tekst med enkle citationstegn. Og den tredje er at omgive din tekst med backticks. Alle tre ser sådan ud:

const string1 = "Nogle tekst her.";
const string2 = 'Nogle tekst her.';
const string3 = `Nogle tekst her.`;

Som du kan se, ser den med “backticks” ret lig ud til enkle citationstegn, men den er lidt mere afslappet. Brugen af backticks til at oprette strenge er en funktion, der blev introduceret med ES6, for at gøre det lettere at arbejde med tekstdata. Det giver flere fordele i forhold til de to andre. Som konvention kan du se, at enten dobbelte citationstegn eller backticks bruges oftere. Du kan finde backticks på den venstre tast til nummer 1 på dit tastatur.

Brugen af dobbelte citationstegn ser mere bekendt ud, og det er lettere at forstå ved første øjekast, men backticks har flere fordele samlet set. I dette eksempel fungerer alle 3 på samme måde, da det er et simpelt eksempel. For at vise alle tre på samme tid, eller endda i samme linje, kan vi skrive deres navne og bruge plus-tegnet imellem dem, på en måde der tilføjer strenge til hinanden.

alert(string1 + string2 + string3);

Som du kan se, vises alle 3 lige efter, at en af dem slutter. Dette skyldes, at vi netop har bedt fortolkeren om at tilføje strenge til hinanden. Hvis vi vil tilføje mellemrum imellem dem, kan vi altid tilføje det rum med en anden streng.

alert(string1 + " " + string2 + " " + string3);

Vi kan også tjekke datatypen af en variabel ved at skrive “typeof” foran den. For eksempel:

alert(typeof string1);

Tal

Når vi arbejder med tal i JavaScript, bruger vi generelt datatypen “Number”. Det er den mest enkle at komme i gang med og har næsten ingen indlæringskurve.

Når vi skriver et tal, repræsenteres det i taltypen. Og hvis vi tildeler det tal til en variabel eller en konstant, vil de også have datatypen tal.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Udover almindelige tal har JavaScript også andre funktioner, der kan hjælpe os med at skrive sikrere og mere forudsigelig kode. For eksempel kan vi i JavaScript have noget, der kaldes “Infinity”, og det er præcis, hvad det lyder som. Desuden kan det være positiv uendelighed og negativ uendelighed. Lad os se, hvordan det ser ud med et eksempel.

// vi kan dividere med nul, og det kaster ikke en fejl
// i stedet returnerer det Inifinity
alert(13 / 0);

// på samme måde kan vi også få negativ uendelighed
alert(-25 / 0);

Som du allerede har set med et par eksempler, kan vi også udføre aritmetiske operationer med tal. Fra grundlæggende addition, subtraktion, multiplikation, division til endda mere programmeringsspecifikke aritmetiske operationer. Vi vil lære mere om dem i den næste tutorial.

Booleans

Booleans er ekstremt almindelige i programmering. Det meste af tiden vil vi ikke eksplicit bruge deres navne, men vi vil bruge deres enkle egenskab under overfladen. En boolean kan have to værdier: “true” og “false”, og de er præcis, hvad de lyder som. Mange gange vil du finde dig selv skrive kode for at lave en sammenligning og en konklusion baseret på resultatet af den sammenligning.

Mange gange er disse sammenligninger rodfæstet i virkelige livsscenarier, og de følger en simpel logik. Er lyset tændt eller slukket? Er der regn udenfor? Er du sulten? Er dette tal større end det andet tal? Er dette afsnit længere end det næste? Er brugeren på en stor skærm?

Der er mange gange, hvor du ikke bare vil have en talværdi eller strengværdi til ting, men du vil faktisk have et ja- eller nej-svar. Kort sagt, på de tidspunkter vil vi bruge datatypen boolean.

// er det første tal større end det andet
alert(13 > 12);

// tjek variabeltypen
let isRainyOutside = true;
alert(typeof isRainyOutside);

At køre denne kode ville give os følgende output:

Nu ved du om variabler og datatyper i JavaScript. I det næste blogindlæg vil vi bruge disse datatyper til at begynde at træffe beslutninger i vores kode og meget mere!

Hvis du kan lide vores indhold, så glem ikke at slutte dig til Facebook-fællesskabet!