Som i de fleste, moderne programmeringssprog er der variabler i JavaScript. Der findes flere forskellige variabler i JS, hvor nogle er en nyere tilføjelse til sproget, der er lavet for bl.a. at gøre kode mere sikker ift. fejl.
Typer
variabler i JavaScript findes i 4 forskellige slags.
<script>
// global variabler deklareres uden keyword
iAmGlobal = "Hello World";
// var-variabel
var myVar = "This is functioning!";
// let-variabel
let letItBe = "I'm in a block";
// const-variabel
const letMeBe = "Don't change me!";
</script>
Declaration & initialization
globale variable, var- og let-variabler kan deklareres uden at skulle initialiseres. Man kan også ændre indholdet og datatypen selvom variablen allerede har en værdi.
<script>
myGlobalVar;
myVar;
myLet;
</script>
const-variabler skal derimod initialiseres ved oprettelse da man i udgangspunktet ikke kan ændre værdi efter at have fået tildelt en så fremt variablen indeholder en “primitiv” datatype som f.eks. en string, number eller Boolean. Indeholder const-variablen en objekt-datatype som f.eks. array eller object kan man ændre i indholdet af enten arrayet eller objektet. Man kan dog ikke oprette et nyt array eller objekt i const-variablen.
<script>
// const-variabel indeholdende værdier af datatypen String kan ikke
// ændres
const myConst = "Don't change me!";
// const-variabel, der indeholder array. her kan man ændre i
// indholdet af arrayet eller tilføje til arrayet
const greatPlayers = ["John Petrucci", "Steve Vai"];
greatPlayers[2] = "Guthrie Govan";
// det samme gælder const-variabel, der indeholder object
const myThings = {car: "Volvo", guitar: "Ibanez"};
myThings.car = "Hyundai";
</script>
Redeclaration
globale- og var-variabler kan redklareres i det scope de i forvejen eksisterer i. Det kan let- og const-variabler ikke. globale-variabler bliver egentligt ikke redeklareret da de i forvejen deklareres på samme måde som man tildeler dem værdier.
<script>
var myVar = "First declaration";
var myVar = "Another declaration";
</script>
Hoisting
Var-variabler bliver hoisted. Dvs., at alle var-variabler bliver “hejset-op” i toppen af processen og tildelt værdien undefined. Dette kan være en fejlkilde og er også en af grundende til, at de nyere let- og const-variabler ikke bliver hoisted. Da undefined ikke automatisk giver en fejlmeddelelse når man bruger den kan det være svært at fejlfinde i kode, hvor man bruger var-variabler.
Scope
Globale variabler
Globale variaber, der deklareres uden var, let eller const har, som navnet antyder, globalt scope. Dvs. variablen er tilgængelig og kan bruges alle steder i et script. Globale variabler og var-variabler, der deklareres uden for funktioner har begge globalt scope og bliver sat som properties på window-objektet. Hvis man udskriver window i konsollen kan man se, at variablerne er en del af window.
var-variabler
Var-variabler har function-scope. Det vil sige, at de indkaples, hvis de eksisterer i en funktion. En var-variabel deklareret i en funktion kan altså ikke tilgås eller bruges uden for den funktion.
<script>
function createScope () {
var name = "My Name";
}
// dette giver en fejl da name ikke er tilgængelig i dette scope da
// det er uden for funktionen
console.log(name);
</script>
Skal man lave noget med var-variabler til et projekt, hvor man ikke ved om andre udviklere bruger samme variabelnavne er man nødt til at lave scripts i self invoking anonymous functions. Sagt på en anden måde, funktioner uden navn, der bliver afviklet automatisk.
<script>
// en self invoking anonymous function
(function(){
var myVar = "Denne variabel eksisterer kun i denne funktion";
})();
</script>
let- og const-variabler
Let- og const-variabler har block scope. Dvs. de eksisterer i den block de oprettes i. En block kendetegnes ved de krøllede paranteser {}. En block kan være en del af en funktion, i et loop eller det kan f.eks. også være en block, der bare eksisterer som block.
<script>
// en block, der inkapsulerer let- og const-variabler
{
let myVar = "Let it be in this block";
}
</script>
Hvilken skal jeg bruge?
Globale variabler kan komme i konflikt med variabler pga. af namespace og da de kan tilgåes fra alle steder fraråder jeg, at du bruger globale variabler.
Var-variabler kan give misvisende information pga. hoisting, hvis man skal fejlfine og da de har function scope skal man sikre sig, at de eksisterer i funktioner. Derfor fraråder jeg også, at disse bruges med mindre du er en haj til dem, har brugt dem i lang tid og bare har styr på dem.
Brug const til funktioner og dom-elementer og let til primitiv data, der skal ændres.