search icon

Variabler – JavaScript

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 propertieswindow-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.

Læs mere

Skriv et svar

Verified by MonsterInsights