Variabler

Programmering består till stor del av beräkningar och bearbetning av data. För att klara av denna datahantering måste man kunna lagra och mellanlagra sina resultat någonstans. Det gör man med hjälp av variabler.

Lagring

Variabler kan ses som behållare, där man lagrar undan ett visst innehåll under en tid. Som man förstår av namnet kan variablers innehåll variera, d.v.s. den data som de innehåller kan förändras.

När man ger en variabel ett värde säger man att man tilldelar den ett värde. När man tilldelar en variabel ett nytt värde, skrivs det gamla värdet över med det nya innehållet. Om man skulle vilja spara undan det gamla värdet, måste man lägga över det i en annan variabel innan man tilldelar det nya värdet. Därför behöver man ofta använda sig av diverse temporärvariabler när man skriver program.

Tilldelning

Användningen av variabler i programmering påminner delvis om hur man använder variabler i matematikens ekvationer, men med några viktiga skillnader. Det som främst skiljer sig är att ”=”-tecknet inte fungerar som i ekvationer! Det betyder tilldelning, dvs. vi sätter variabeln till ett specifikt värde snarare än att vi säger att höger- och vänsterled är lika. Likaså kan man enbart tilldela ifrån högerled till vänsterled. Med andra ord, variabeln som man vill tilldela ett värde måste alltid stå på vänster sida om ”=”-tecknet och det man vill tilldela variabeln ska stå på höger sida. Datorn kommer alltid att beräkna klart hela högerledet och sedan flytta in resultatet i den variabel som anges i vänsterled.

Följande exempel tilldelar värdet två till en variabel som heter tal:

  tal = 2;

Ovanstående är alltså en sats som utför en tilldelning. Det har ingenting att göra med likhet eller jämförelse. Alla programrader körs var för sig i sekvens, vilket innebär att denna tilldelning sker först när programmet når raden i fråga.

Deklaration och användning

JavaScript är ett svagt typat språk, det innebär att man inte behöver tala om vilken datatyp en variabel har. Däremot måste man deklarera variabeln, det vill säga man måste skapa variabeln. Gör man inte detta så existerar inte variabeln enligt JavaScript (obs, detta gäller när man kör use strict, vilket man alltid ska göra). När man deklarerar talar man om för interpretatorn, som ska tolka programmet, vad variabeln heter. Namnet kommer sedan att vara konstant, medan den data som variabeln innehåller kan förändras.

I JavaScript deklarerar man variabler med let, en deklarationssats kan bli att se ut så här:

  let spelare;

När man deklarerat variabeln spelare på det viset, har den fortfarande inte tilldelats något värde. Om du skulle använda den till något annat än tilldelning, kan du få en varning. Det är en bra vana att tilldela ett grundvärde till variabler i anslutning till att man deklarerar dem. T.ex. kan man göra så här för att skapa en variabel som har värdet ett ifrån början:

  let spelare = 1;

För att senare tilldela ett nytt värde till en variabel, använder man sig av ett vanligt ”=”-tecken, t.ex.:

  spelare = 2;

Efter tilldelningen har variabeln värdet 2 och eventuellt tidigare innehållet skrivs över och "försvinner". När variabeln senare används kommer programmet att titta i ”behållaren” som heter spelare och se att där finns en tvåa (det vill säga, ända tills du tilldelar variabeln ett nytt värde). För programmet är det ingen direkt skillnad om du skriver 2 eller spelare, bägge kommer att tolkas som värdet två (i alla fall tills du tilldelar spelare ett annat värde än 2). Följande kod är alltså likvärdig;

  spelare = 2;
  FlyttaRacket( spelare );

Skulle ge samma resultat som;

  FlyttaRacket( 2 );

(Förutom att i första exemplet har vi ju kvar värdet två, lagrat i variabeln spelare. Vilket kan vara praktiskt om man vill använda värdet igen. Det är ju även mycket enklare att förstå vad tvåan har för betydelse om värdet ligger i något som heter spelare.)

Man kan deklarera flera variabler samtidigt. Man åtskiljer då de olika variablerna med ett ”,”-tecken. Om man vill kan man blanda huruvida variablerna får en tilldelning vid deklarationen eller ej. T.ex.:

  let spelare = 1, poäng = 0, riktning, tid, highScore = 0;

Föregående rad skapar fem variabler. Variablerna spelare, poäng och highScore tilldelas ett värde redan vid deklarationen. De övriga två, riktning och tid, får det speciella värdet undefined. Det vill säga dess innehåll är odefinierat och man bör vara försiktig att använda dylika variabler innan man tilldelat dem ett värde.

Variabelegenskaper

Man kan säga att variabler har tre grundegenskaper;

1. Namn
2. Datatyp (vilken inte är så viktig i JavaScript, då detta kan förändras beroende på vad variabeln används till)
3. ”Räckvidd”/synlighet

Vi går igenom dessa egenskaper var för sig…

1. Namn och namngivningskonventioner

Varje variabel behöver ett eget namn eller identifierare, så att den går att urskilja från övriga variabler. Namnet bör helst vara beskrivande, så att man enkelt kan förstå vad variabeln används till. Om du t.ex. vill lagra ett personnummer, kanske just personnummer är ett bra variabelnamn.

Det svåraste med programmering är att skriva läsbar och förståelig kod som går att underhålla och förändra senare. Det gäller inte bara att förstå koden just när man skriver den, man måste kunna förstå den om ett år, fem år, tio år… Koden ska även vara så lättläslig och lättförståelig att andra ska kunna förstå och arbeta med koden. Det är därför extra viktigt att välja bra namn för variabler, konstanter, funktioner, osv. Självklart ska man även kommentera koden och förklara mer utförligt vad de olika variablerna är till för.

Om du kommer att jobba som programmerare kommer du säkert att hamna på ett ställe där man har en förutbestämd mall, en så kallad stilguide, som fastställer hur all kod ska se ut. Det kan gälla alltifrån hur många tabbar eller mellanslag varje rad ska indenteras med, till bestämmelser för hur variabler och liknande ska namnges. När alla följer en sådan mall får man mer enhetlig kod som är lättare att underhålla och förstå för alla på arbetsplatsen.

Namngivningsregler

I JavaScript har man följande namngivningsregler (dessa regler gäller alla saker som kan namnges, t.ex.; variabler, funktioner, osv...):

Man kan inte använda vilka tecken som helst när man namnger saker. Variabelnamn måste börja med en bokstav eller ett ”_”-tecken. Du kan alltså inte påbörja ett variabelnamn med en siffra.

Man kan inte ha mellanslag eller liknande blankstegstecken i ett variabelnamn, då använder man oftast ”_”-tecknet istället.

Vissa tecken fungerar inte i variabelnamn. Ett exempel på detta är "-"-tecken, för då fattar inte JavaScript om du vill subtrahera eller om det är en del av ett namn. Det är alltså bäst att hålla sig till de vanliga tecknen i vårt grundalfabet. Samma sak gäller för alla räknesätten; +, -, /, *.

Man kan inte heller använda samma namn som används av de inbyggda kommandon, t.ex. kan du inte ha en variabel som heter ”if” eller ”for”.

I JavaScript är variabelnamn känsliga för versaler/gemena, dvs stora och små bokstäver. Det betyder att följande satser hänvisar till helt olika variabler;

let Variabeln;
let variabeln;
let VaRiAbElN;

I JavaScript inleder man oftast ett variabelnamn med en liten bokstav (gemen). Det spelar ingen roll för datorn, men vi programmerare är vana att det ska se ut så.

Camel-case

Som vi tidigare konstaterade så kan man inte använda mellanslag i variabelnamn. För att lösa det brukar man använda sig av så kallat camel-case (ibland kallat kamelnotation, men ingen säger så). Det innebär att istället för att skriva ut mellanslag så skriver man samman allt och för varje nytt ord så sätter man en stor bokstav (versal).

Ett par exempel:

let kamelerÄrDjur;
let ingaMellsanslagIVariabler;

2. Datatyp

Datatyp handlar om vilken sorts data/information en variabel innehåller. Olika exempel på datatyper kan vara tal, sträng (vanlig text), osv. JavaScript är dock ett svagt typat språk och man anger inte vilken datatyp en variabel har. Istället tolkar JavaScript variabelns innehåll utifrån hur den används. Behövs en textsträng, tolkas innehållet som en textsträng och behövs ett tal, tolkas innehållet som ett tal. Ibland kan detta dock bli lite "fel", JavaScript kanske tolkar ditt tal som en textsträng. I sådana fall finns det metoder som gör att man kan "övertala" JavaScript att tolka på ett korrekt vis.

let enSträng = "Vanlig text";
let ettHeltal = 1;
let ettDecimaltal = 1.5;

Observera även att JavaScript, liksom de flesta programmeringsspråk är på engelska och att man därför använder ”.” istället för ”,” i decimaltal. Kommatecknet används istället som avgränsning när man skriver in innehåll i olika typer av listor.

Datatypen avgör inte bara vad som kan lagras i en variabel utan det avgör även vilka operationer man kan utföra på variablen. Att dividera en sträng (text) med en annan sträng kommer inte att fungera. Däremot fungerar det, förstås, utmärkt med tal-variabler.

3. Räckvidd och synlighet

Variabler kan antingen gälla inom ett specfikt {}-block eller globalt (dvs i hela programmet). Variabelns räckvidd och synlighet kallas för ”scope” på engelska. Var man kan använda en variabel beror på var den deklareras. Rent generellt kan man säga att en variabel enbart är tillgänglig i det block där den deklareras. Utanför blocket existerar inte variabeln.

Detta betyder alltså att du i många fall kan ha variabler med samma namn i olika delar av ditt program, utan att de på något sätt påverkar varandra. Det är på grund av deras scope grö att de ses som helt olika variabler, trots att de heter lika.

Variabler skapas och tas bort dynamiskt allteftersom programmet körs. En variabel som deklarerats inuti ett block försvinner när den avslutande "}" nås (förutom i några specialfall, så kallade closures, vilket är mer avancerat och vi kan inte gå in på det än).

Om ditt program kommer tillbaka till samma block, t.ex. om du kallar på den två gånger i rad, så återskapas variablerna på nytt och försvinner återigen när blocket tar slut. Inget variabelinnehåll sparas mellan körningarna, så om du behöver ha kvar ett värde måste du på något sätt spara undan det. Kanske du skriver ner det på disk i en fil eller kanske du har en variabel som ligger ”högre” upp i hierarkin och sparar ditt värde där.

Skillnader på var och let

Tidigare deklarerade man variabler med var. Det kan man iofs fortfarande göra. Men let har en hel del fördelar och man bör använda sig av den varianten. Det finns dock en hel del gammal kod som använder sig av var. Vi går igenom hur var fungerar, så att du vet vad det handlar om i fall du ser den i gammal kod.

JavaScripts variabelhantering har några egenheter som inte de flesta andra språk har. Det gäller speciellt om man använder sig av var. Den använder sig av något som kallas "hoisting", det vill säga engelskans uttryck för att lyfta upp något. När man använder var och deklarerar en variabel i en funktion, oavsett var i funktionen det sker, så "flyttar" JavaScript upp deklarationen till början av funktionen. Det vill säga variabeln blir att existera redan i början av funktionen, även om den är deklarerad i slutet.

Det innebär alltså att följande två exempel är likvärdiga:

function test(parameter)
{
  var värde;

  if(parameter == 1) 
  {
    värde = 1;
    // Gör nånting
  }
}

och

function test(parameter)
{
  if(parameter == 1) 
  {
    värde = 1;
    // Gör nånting
  }

  var värde;
}

I bägge exemplen kommer variabeln värde att vara tillgänglig i hela funktionen. Detta gäller alltså även innan den deklarerats, såsom i det andra exemplet.

Dock är det enbart deklarationen som lyfts upp. Eventuell tilldelning som utförs tillsammans med deklarationen lyfts inte upp! Så om vi har följande kod:

function test(parameter)
{
  if(parameter == 1) 
  {
    console.log(värde);
  }

  var värde  = 1;
}

Så kommer console.log att rapportera att värde är undefined eftersom den inte tilldelats något värde ännu. När körningen når raden som har var värde = 1;, då kommer variabeln att tilldelas värdet ett.

Detta beteende är rätt så unikt för JavaScript och kan verka märkligt om man är van med andra programmeringsspråk...

I de flesta andra språk är variabler unika för det block de befinner sig inuti, där ett block är kod som står inom "{" och "}". Vilket gör att man kan ha "lokala" variabler i olika block som befinner sig i en och samma funktion. I andra språk uppstår variabler först när programkörningen når den rad där variabeln skapas och kan inte användas före detta.

Eftersom många har efterfrågat det "normala" beteendet för att skapa variabler, så införde JavaScript2015 ett nytt sätt att deklarera variabler. Man kan nu även använda sig av let. Variabler som deklareras med let uppför sig så som man är van med ifrån andra språk. De skapas och kan användas först efter den rad där de deklarerats. Deras synlighet, eller scope, är enbart det block där de skapats.

Ett exempel på hur let inte lyfts upp:

function test(parameter)
{
  if(parameter == 1) 
  {
    // Här existerar inte variablen värde
  }

  let värde  = 1; // Först efter detta finns variabeln
}

Ett exempel på hur let kan användas för att få "lokala" variabler:

function test(parameter)
{
  if(parameter == 1) 
  {
     let värde = 1; // Den här variabeln existerar bara i detta block
  } // Här upphörde värde att existera

  if(parameter == 2) 
  {
     // Här skapas en ny variabel, som inte har något att göra med
     //  den som fanns i föregående if-sats.
     let värde = 2; // Den här variabeln existerar bara i detta block
  } // Här upphörde värde att existera
  
   // Detta blir en helt ny variabel, som inte har något med
  // ovanstående att göra
  let värde  = 1;
}

Att använda samma variabelnamn stup i kvarten inom en och samma funktion är rätt så dåligt. Det blir svårläst och förvirrande. Men ovanstående var ju bara ett exempel...

Om du bara orkar lära dig en variant av variabeldeklaration, satsa på let. Den fungerar i alla tillfällen och är mer "normal" än var. Du måste dock känna till bägge varianterna, då det finns mycket gammal kod som använder sig av var och det finns många programmerare som hellre använder sig av den varianten.

Nästa aktivitet

Villkorssatser