Variabler och datatyper i JavaScript. Del 3 JavaScript-kurs från nybörjare till avancerad på 10 blogginlägg

Detta är del 3 av blogginläggsserien om JavaScript som hjälper dig att utforska ämnet variabler och datatyper i JavaScript. I slutet av denna serie kommer du att känna till alla grunder du behöver för att börja koda i JavaScript. Utan vidare ado, låt oss börja med den tredje handledningen.

Variabler och datatyper i JavaScript – innehållsförteckning:

1. Variabler
2. Grundläggande datatyper i JavaScript

I detta blogginlägg kommer vi att fortsätta där vi slutade i det andra blogginlägget. Vid detta stadium bör du ha din Google Chrome-webbläsare öppen och mer specifikt ha din JavaScript-konsol öppen. Om du av någon anledning stängde dem, skulle det vara en bra tid att öppna dem igen.

Om du är på en Mac är kortkommandot för att öppna konsolen att trycka på “Option + Command + J”, efter att du har öppnat Chrome. Om du använder en Windows-enhet kan du använda kortkommandot “Control + Shift + J” för att öppna JavaScript-konsolen, när du har öppnat Chrome. Eller så kan du också gå till menyn högst upp och gå till Visa -> Utvecklare -> JavaScript-konsol.

Variabler

Variabler i JavaScript eller något annat programmeringsspråk är extremt vanliga. Och det är av en god anledning. Variabler har en mycket kritisk roll i programmering. I korthet tillåter variabler dig att lagra viss data för att flytta data, modifiera den, uppdatera eller ta bort den i ditt program. Det är ett så viktigt koncept att det finns 3 sätt att skapa variabler. Programmeringsspråket för att skapa variabler kallas “deklarera variabler”, vilket i grunden betyder att vi deklarerar en variabel i datorns minne.

För att skapa variabler kommer vi att använda ett av de 3 nyckelorden och de är: “var”, “let” och “const”. En av de första sakerna du bör veta om dessa 3 nyckelord är att fram till 2015 användes endast nyckelordet “var” och nyckelorden “let” och “const” introducerades med en JavaScript-standard som kallas ES6 eller ES2015.

Om du inte har någon aning om vad ES6 eller ES2015 är, här är vad du bör veta om det. När JavaScript först kom ut implementerade olika företag olika versioner av JavaScript, och det måste finnas en standard för att din kod skulle kunna köras förutsägbart och pålitligt i alla större webbläsare. Så en organisation som heter ECMA, (European Computer Manufacturing Association) kom upp med en uppsättning JavaScript-standarder som webbläsare skulle implementera. Så länge du följer dessa standarder när du skriver JavaScript, bör din kod köras förutsägbart enligt dessa standarder. Denna standard kallas EcmaScript och de har släppt uppdaterade standarder sedan 1997. Och sedan 2015 har de släppt dessa standarder årligen, och därmed kallas den senaste släppta standarden ES2021 i skrivande stund av detta blogginlägg.

Men inte alla versioner är desamma, vissa versionsskillnader är inte så stora, medan vissa introducerar ganska stora förändringar i språket. De senaste stora förändringarna inträffade med ES2015, även kallad ES6, eftersom det var släppet av version sex av ECMAScript-standardiseringen. En av de betydande förändringarna kom till variabeldeklarationerna.

Innan ES6 användes endast nyckelordet “var” och det var det enda sättet att deklarera variabler, därav namnet “var”. Nyckelordet var kom med flexibiliteter som kunde orsaka oönskade problem. Eftersom det var betydligt flexibelt i användning var det lättare att göra misstag med variabler om du var mindre försiktig än du borde vara. Till exempel, om du deklarerade en variabel som heter “user1”, kan du inte omdeklarera en variabel som heter user1 med de nya nyckelorden “let” och “const”, men du kunde göra det med nyckelordet “var”. Och om du glömmer att du redan har en user1 i ditt program, den andra gången du deklarerar user1 med en annan användares information, skulle du skriva över den faktiska första användarens information, vilket effektivt skulle radera den första användarens information.

// detta kan orsaka förvirring
var user1 = "John";
var user1 = "Jack";
// om du försöker göra samma sak 
// med let eller const får du ett fel
let user1 = "John";
let user1 = "Jack";
// på samma sätt får du också ett fel
// om du försöker göra samma sak med const-nyckelordet
const user1 = "John";
const user1 = "Jack";

Men det är inte så att du inte kommer att se nyckelordet “var” användas någonstans, du kommer definitivt att se det, särskilt i vissa nybörjarnivå JavaScript-kurser. Särskilt om de är några år gamla, finns det många handledningar som fortfarande visar dig det gamla sättet att skriva JavaScript. Men verkligheten är att det helt enkelt inte är bästa praxis att använda det längre. Istället är bästa praxis att använda nyckelorden “let” eller “const” när du deklarerar variabler, beroende på dina behov. Men vilka behov pratar vi om? I korthet, om du planerar att ändra värdet inuti en variabel vill du använda nyckelordet “let”, om du vet att du inte kommer att ändra värdet i en variabel, vill du gå med “const” istället. Låt oss se några exempel på variabeldeklarationer med både let och const.

// vi kan använda "let" när vi vill spåra användarens spel nivå
// eftersom vi vet att det kommer att förändras
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// vi kan använda "const" nyckelordet när vi deklarerar användar-ID
// eftersom vi vet att vi inte kommer att ändra det
const userId = 1010101999;

Om du också har lagt märke till från koden ovan, med de senaste bästa metoderna, skriver vi bara deklarationsnyckelorden en gång, och vi gör det när vi först deklarerar variabeln. När vi vill ändra värdet inuti variabeln senare, använder vi inget nyckelord före variabelnamnet.

När vi vill komma åt de data som dessa variabler eller konstanter innehåller, kan vi helt enkelt använda deras namn. Till exempel, om vi vill visa användaren deras spel nivå och deras användar-ID, gör vi det med följande kod:

// vi kan lägga till användar-ID till slutet av meningen med ett plustecken
// vi kommer att förklara detta senare i handledningen
alert("Ditt användar-ID är: " + userId);
// vi kan också visa användaren deras spel nivå som följande
alert("Din nuvarande spel nivå är: " + gameLevel);
// alternativt kan vi direkt visa 
// innehållet i variablerna genom att visa dem i en alert
alert(userId);
alert(gameLevel);

Att köra de sista två kodblocken skulle ge följande utdata:

Hur namnger du dina variabler?

När du namnger dina variabler finns det vissa regler och konventioner du bör överväga. Den första övervägningen är vilka tecken du kan använda för att namnge dina variabler? Kan de börja eller sluta med ett nummer? Finns det en vanlig oskriven sanning om att namnge dina variabler? Låt oss svara på allt detta och mer.

Olika programmeringsspråk har olika konventioner för att namnge variabler. I JavaScript är konventionen att namnge dem med det som kallas “camel casing”, och går så här. Om variabelnamnet har endast ett ord, skriver du bara det ordet med små bokstäver. Om det finns flera ord i variabelnamnet, skriver du det första ordet med små bokstäver och du kapitaliserar alla efterföljande ord och skriver dem utan några mellanslag eller andra tecken. Till exempel, om vi gör ett spel, kan vi namnge variablerna så här:

// en variabel med ett ord
let strength = 50;
// ett beskrivande namn som inkluderar flera ord
let numberOfArrowsLeft = 145;

Förutom att använda alfabetiska tecken kan vi också använda siffror, dollartecken och understreck i variabelnamnen. Det är viktigt att notera att du inte kan börja variabelnamnet med ett nummer, men du kan avsluta det med ett nummer.

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

Notera att bara för att det är möjligt, vill vi inte namnge våra variabler med otydliga namn eller med symboler. Och det är ett annat ämne för sig själv. När vi namnger variabler är konventionen att ha tydliga och beskrivande namn. Till exempel, om vi ska namnge en variabel för att ange hur många pilar som finns kvar i en bågskytts väska, bör vi använda ett beskrivande namn som det vi använde i exemplet ovan. Om vi skulle använda bara:

let x = 145;

Detta namn skulle inte säga oss något om vilket värde det har. Och även ett par dagar efter att ha skrivit denna kod skulle vi behöva läsa den omgivande koden för att förstå vad den variabeln kan betyda. Det är därför, både för din egen tydlighet när du skriver koden, och för din framtida jag som kanske granskar koden, är det verkligen viktigt att du vänjer dig vid att namnge dina variabler på ett tydligt och beskrivande sätt. Detta kommer också att bli ännu viktigare när du börjar arbeta med andra människor och visar dem din kod.

Vid det här laget kanske du tänker: Det är bra att vi kan flytta data och till och med ändra det med hjälp av variabler. Men vilken data pratar vi om här? Varför satte vi vissa delar inom citat och vissa delar inte? För att svara på allt detta och mer, låt oss se de grundläggande datatyperna i JavaScript.

Grundläggande datatyper i JavaScript

Olika datatyper är bra på att göra olika saker. I denna handledning om grundläggande datatyper i JavaScript kommer vi att se de mest grundläggande 3 typerna av data som vanligtvis används i JavaScript. Senare i serien kommer vi att lära oss om andra datatyper i JavaScript. När du har lärt dig dessa första 3 grundläggande datatyper kommer det att bli mycket lättare att lära sig de andra datatyperna. De 3 datatyperna vi kommer att se i denna handledning är: Strängar, Siffror och Booleans. Utan vidare ado, låt oss börja med den första.

Strängar

Om du har följt med i handledningen från början har du redan arbetat med datatypen sträng! När vi skrev en alert som sa “Hello, World!” använde vi datatypen sträng för att lagra den text vi skrev. I JavaScript finns det 3 sätt att representera strängar. Det första är att omge din text med dubbla citattecken. Det andra är att omge din text med enkla citattecken. Och det tredje är att omge din text med backticks. Alla tre ser ut så här:

const string1 = "Någon text här.";
const string2 = 'Någon text här.';
const string3 = `Någon text här.`;

Som du kan se ser den med “backticks” ganska lik ut som den med enkla citattecken, men den är något mer avslappnad. Användningen av backticks för att skapa strängar är en funktion som introducerades med ES6, för att göra det enklare att arbeta med textdata. Det ger flera fördelar jämfört med de tidigare två. Enligt konvention kan du se antingen dubbla citat eller backticks användas oftare. Du kan hitta backticks på vänster tangent av nummer 1 på ditt tangentbord.

Användningen av dubbla citat ser mer bekant ut och är lättare att förstå vid första anblick, men backticks har fler fördelar överlag. I detta exempel fungerar alla 3 på samma sätt eftersom det är ett enkelt exempel. För att visa alla tre samtidigt, eller till och med på samma rad, kan vi skriva deras namn och använda plustecknet mellan dem, på ett sätt som lägger till strängarna till varandra.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Som du kan se visas alla 3 direkt efter att en av dem slutar. Detta beror på att vi just berättade för tolken att lägga till strängarna till varandra. Om vi vill lägga till mellanslag mellan dem kan vi alltid lägga till det utrymmet med en annan sträng.<p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

Vi kan också kontrollera datatypen av en variabel genom att skriva “typeof” framför den. Till exempel:

alert(typeof string1);

Siffror

När vi arbetar med siffror i JavaScript använder vi vanligtvis datatypen “Number”. Det är den enklaste att börja med och har nästan ingen inlärningskurva.

När vi skriver ut ett nummer representeras det i nummerformat. Och om vi tilldelar det numret till en variabel eller konstant kommer de också att ha datatypen nummer.

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

Förutom vanliga siffror har JavaScript också andra funktioner som kan hjälpa oss att skriva säkrare och mer förutsägbart kod. Till exempel kan vi i JavaScript ha något som kallas “Infinity”, och det är precis vad det låter som. Dessutom kan det vara positiv oändlighet och negativ oändlighet. Låt oss se hur det ser ut med ett exempel.

// vi kan dela med noll och det kastar inte ett fel
// istället returnerar det Inifinity
alert(13 / 0);

// på samma sätt kan vi också få negativ oändlighet
alert(-25 / 0);

Som du redan har sett med några exempel kan vi också göra aritmetiska operationer med siffror. Från grundläggande addition, subtraktion, multiplikation, division till ännu mer programmeringsspecifika aritmetiska operationer. Vi kommer att lära oss mer om dem i nästa handledning.

Booleans

Booleans är extremt vanliga i programmering. För det mesta kommer vi inte uttryckligen att använda deras namn, men vi kommer att använda deras enkla egenskap under huven. En boolean kan ha två värden: “true” och “false” och de är precis vad de låter som. Många gånger kommer du att finna dig själv skriva kod för att göra en jämförelse och en slutsats baserat på resultatet av den jämförelsen.

Många gånger är dessa jämförelser rotade i verkliga livsscenarier, och de följer en enkel logik. Är ljuset på eller av? Regnar det ute? Är du hungrig? Är detta nummer större än det andra numret? Är detta stycke längre än det nästa? Är användaren på en stor skärm?

Det finns många gånger där du inte bara vill ha ett nummer eller strängvärde till saker, utan du vill faktiskt ha ett ja eller nej-svar. I korthet, vid dessa tillfällen kommer vi att använda datatypen boolean.

// är det första numret större än det andra
alert(13 > 12);

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

Att köra denna kod skulle ge oss följande utdata:

Nu vet du om variabler och datatyper i JavaScript. I nästa blogginlägg kommer vi att använda dessa datatyper för att börja fatta beslut i vår kod och mycket mer!

Om du gillar vårt innehåll glöm inte att gå med i Facebook-gemenskapen!