Frontend Academy · Lektion

Variabler: let, const, var og scope

Erklær variabler med let, const og var. Forstå block scope og function scope, og hvorfor const foretrækkes til de fleste værdier.

Lektion 1 af 413 trin

Variabler: let, const, var og scope er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor bruge variabler

Variabler gemmer værdier, så du kan genbruge og opdatere dem samt give dem meningsfulde navne. JavaScript har tre måder at deklarere variabler på: var (ældre), let (moderne, kan tildeles på ny) og const (moderne, konstant binding).

const — Standardvalget

Deklarer med const, når du ikke vil tildele variablen en ny værdi. Det viser din hensigt og forhindrer utilsigtet gentildeling. Bemærk: const forhindrer en ny binding, men gør ikke objekter eller arrays uforanderlige.

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let — Når du skal tildele en ny værdi

Brug let, når værdien ændrer sig: tællere i løkker, akkumulerede summer og tilstandsvariabler. let har blokomfang — det findes kun inden for den nærmeste omsluttende { }.

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var — Den ældre deklaration

var har funktionsomfang (ikke blokomfang) og løftes til toppen af sin funktion. Det medfører subtile fejl. Undgå var i moderne JavaScript, og foretræk const og let.

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

Omfang: Hvor variabler lever

Globalt omfang: deklareret uden for enhver funktion eller blok og tilgængeligt overalt. Funktionsomfang: deklareret i en funktion og kun tilgængeligt i den funktion. Blokomfang: let/const inden i { }, kun tilgængeligt i den blok.

Deklarationsløftning

Deklarationsløftning flytter deklarationer til toppen af deres omfang under kompileringen. var-deklarationer løftes og initialiseres til undefined. let og const løftes, men initialiseres ikke — hvis du tilgår dem før deklarationen, opstår der en fejl i den midlertidige døde zone.

Navngivning af variabler

Brug beskrivende navne. Brug camelCase til variabler og funktioner (userName), UPPER_SNAKE_CASE til konstanter (MAX_RETRIES) og PascalCase til klasser (UserProfile). Undgå enkeltbogstaver, bortset fra i løkker (i, j).

Deklarering af flere variabler

Du kan deklarere flere variabler i én sætning, men det er som regel tydeligere at bruge én deklaration pr. variabel. Undgå kommaformen, da den kan skjule omfang og typer.

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

Den midlertidige døde zone (TDZ)

Hvis du tilgår en let- eller const-variabel før dens deklaration i koden, udløses en ReferenceError. Zonen mellem blokkens start og deklarationen kaldes TDZ.

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;

const med arrays og objekter

const forhindrer, at variablen tildeles på ny, men den refererede værdi kan stadig ændres. Brug Object.freeze() til et overfladisk uforanderligt objekt eller uforanderlige mønstre til dyb uforanderlighed.

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

Hvorfor foretrække const frem for let

Hvis du som standard bruger const, bliver koden lettere at gennemskue: Du ved, at variablen ikke bliver tildelt på ny et andet sted. Skift kun til let, når du faktisk har brug for at tildele på ny. Denne vane reducerer fejl og forbedrer læsbarheden.

Hurtigt tjek

Hvad er den vigtigste forskel mellem let og var?

Besvar den i den interaktive lektion

Opsummering: Variabler og omfang

Foretræk const til værdier, der ikke skal tildeles på ny. Brug let til værdier, der kan ændres. Undgå var. Blokomfang (let/const) holder variablerne afgrænsede. Ved deklarationsløftning initialiseres var til undefined, mens let/const udløser en TDZ-fejl, hvis de tilgås for tidligt.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Variabler: let, const, var og scope” gratis?

Ja — hele teksten til “Variabler: let, const, var og scope” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Variabler: let, const, var og scope”?

Erklær variabler med let, const og var. Forstå block scope og function scope, og hvorfor const foretrækkes til de fleste værdier. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Variabler: let, const, var og scope”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Variabler: let, const, var og scope
Datatyper: string, number, boolean, null og undefined
Funktioner: erklæringer, udtryk og arrow functions
Kontrolflow: if, else, switch, for og while

← Tilbage til Frontend Academy