Variable scope, closure

JavaScript er et meget funktionsorienteret sprog. Det giver os en masse frihed. En funktion kan skabes når som helst, overføres som argument til en anden funktion, og derefter kaldes fra et helt andet sted i koden.

Vi ved allerede, at en funktion kan tilgå variabler uden for den (“outer” variables).

Men hvad sker der hvis de ydre variabler ændres efter en funktion er skabt? Vil funktionen få de nyere værdier eller de gamle?

Og hvad hvis en funktion gives som et argument til en anden funktion og derefter kaldes fra et andet sted i koden, vil den da have adgang til de ydre variabler på det nye sted?

Lad os udvide forståelsen af funktioner for at håndtere mere komplekse situationer der gør brug af dem.

I JavaScript er der tre måder at deklarere en variabel: let, const (de moderne måder), og var (et l"evn fra fortiden").

I denne artikel bruger vi let til at deklarere variable i eksemplerne.
Variable der er deklareret med const, opfører sig på samme måde, så denne artikel gælder også for dem.
Den traditionelle var har en lidt anderledes opførsel, som beskrives i artiklen Den gamle "var".

Kodeblokke

Hvis en variabel er deklareret inden for et kodeblok {...}, er den kun synlig inde i den blok.

For eksempel:

{
  // udfør kode med lokale variable der ikke skal være synlige uden for blokken

  let message = "Hej"; // kun synlig inde i denne blok

  alert(message); // Hej
}

alert(message); // Fejl: message er ikke defineret

Vi kan bruge dette til at isolere en del af koden, som har sin egen opgave og variable der kun tilhører den:

{
  // vis besked
  let message = "Hej";
  alert(message);
}

{
  // vis en anden besked
  let message = "Farvel";
  alert(message);
}

Bemærk at uden separate blokke ville der være en fejl, hvis vi bruger let med en eksisterende variabelnavn:

// vis besked
let message = "Hej";
alert(message);

// vis en anden besked
let message = "Farvel"; // Fejl: variabel allerede deklareret
alert(message);

For if, for, while og så videre gælder det også at variable deklareret inden for {...} er kun synlige inde i blokken: